---
title: "Slider | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/slider/"
---

# Slider

> This widget displays multiple images. You can scroll through these images and use a lightbox to look at them closer.

![Slider widget.](images/slider.png)

## General information

- **type**: `slider`

## Defining a slider

In `params`, you must define an array of `images`, where each element contains the following properties:

```
{
  "title": "Preview",
  "url": "http://example.com/images/online.png",
  "urlHD": "http://example.com/images/online%5b1920x1920%5d.png"
}
```

You can also define the `direction` - either `"vertical"`, `"horizontal"`, or `"tile"`.

When the `direction` is `"vertical"` or `"horizontal"`, you can also specify the `quantity` of images on the screen and enable scrolling images with arrows in `listPage`. By default, the images are scrolled one by one. If you need to scroll more images, define this number in `increment`.

When the `direction` is `"tile"`, you can specify the number of `columns` and `rows`.

For more details about configuration parameters, refer to [ISliderConfig interface](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-slider.ISliderConfig.md#isliderconfig).

## Styles

To configure the appearance of the `slider` widget, you can define the `style` object and apply the following properties:

- `--au-widget--height` - the widget height.
- `--au-widget-padding` - the padding inside the container.
- `--au-widget-images-gap` - the distance between images.
- `--au-widget-background` - the background color of the image container.
- `--aurigma-responsive-image-border` - the style of image borders.
- `--au-widget-title-margin-top` - the top margin of the image title.
- `--au-widget-title-margin-bottom` - the bottom margin of the image title.
- `--au-widget-image-border` - the border of the _cards_ (the image with its title).

## Examples

### Displaying proof images

Let's look at how you can display proof images generated in the [DesignEditor](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/design-editor.md) widget.

```json
{
    "name": "preview",
    "type": "slider",
    "params": {
        "style": {
            "--au-widget-height": "430px",
            "--au-widget-background": "#f2f2f2"
        },
        "direction": "tile",
        "rows": 1,
        "columns": 2,
        "showImageIndex": false,
        "lightbox": false,
        "images": [
            {
                "url": "{{ $['editor'].proofImageUrls[0][0] }}"
            },
            {
                "url": "{{ $['editor'].proofImageUrls[1][0] }}"
            }
        ]
    }
}
```

To preview multipage products, you can pass images in this widget as follows:

```json
{
    "name": "preview",
    "type": "slider",
    "params": {
        "style": {
            "--au-widget-background": "#eee",
            "--au-widget-height": "50%",
            "--au-widget-padding": "8px"
        },
        "direction": "tile",
        "rows": 1,
        "columns": "{{Math.min(2,$['editor'].proofImageUrls.length)}}",
        "containerColor": "#eee",
        "images": {
            "{{#each $['editor'].proofImageUrls.map(s=>s[0]) as imageUrl }}": {
                "url": "{{imageUrl}}"
            }
        }
    }
}
```

### Changing the widget style

In this example, we display a preview generated in the [Ajax](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/ajax.md) widget. Here, we completely change the appearance of the widget.

```json
{
    "name": "preview",
    "type": "slider",
    "params": {
        "direction": "vertical",
        "quantity": 1,
        "lightbox": true,
        "style": {
            "--au-widget-height": "1200%",
            "--au-widget-width": "100%",
            "--au-widget-padding": "1px",
            "--au-widget-images-gap": "10px",
            "--au-widget-background": "#fff",
            "--aurigma-responsive-image-border": "2px solid var(--theme-primary-color)",
            "--aurigma-image-border": "2px solid var(--theme-primary-color)",
            "--au-widget-title-margin-top": "0",
            "--au-widget-title-margin-bottom": "2px"
        },
        "images": [
            {
            "title": "Preview",
            "url": "{{$['image-request'].response}}",
            "urlHD": "{{$['image-request'].response}}"
            }
        ]
    }
}
```