---
title: "au-widget-image-carousel/IImageCarouselConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-image-carousel.IImageCarouselConfig/"
---

# au-widget-image-carousel/IImageCarouselConfig

> Provides properties for the `image-carousel` widget.

## Interfaces

### IImageCarouselConfig

You can use these properties in **params** of the `AuWidgetImageCarousel` class.
```json
{
  "widgets": [
    {
      "name": "images",
      "type": "image-carousel",
      "params": {
        "images": [
          {
            "title": "Front Side",
            "url": "http://example.com/some/url/1/front.jpg"
          },
          {
            "title": "Back Side",
            "url": "http://example.com/some/url/1/back.jpg"
          }
        ]
      }
    }
  ]
}
```

#### Properties

##### arrowButtonsEnabled

```ts
arrowButtonsEnabled: boolean;
```

If `true`, enables arrow buttons next to the main image.

##### autoPlay

```ts
autoPlay: number;
```

An image switching speed, in milliseconds. By default, this value is `0`, and the autoplay is disabled.

##### containerColor

```ts
containerColor: string;
```

The color of the image container.

##### images

```ts
images: IImage[];
```

An array of images.

##### imageSelectorAlignment

```ts
imageSelectorAlignment: string;
```

##### imageSelectorPosition

```ts
imageSelectorPosition: string;
```

The position of the tumbnails (either `"left"`, `"bottom"`, `"right"`, or `"none"`).

##### lightbox

```ts
lightbox: boolean;
```

If `true`, enables the lightbox.

##### onChange?

```ts
optional onChange?: Function[];
```

Functions, that executed after current image changed.

##### preloader

```ts
preloader: IImageCarouselPreloaderConfig;
```

carousel preloader settings

##### resetIndexOnUpdate

```ts
resetIndexOnUpdate: boolean;
```

If `true`, the first image will be selected when the image list is updated.

##### showImageHeader

```ts
showImageHeader: boolean;
```

If `true`, image headers appear in the carousel.

##### showIndex

```ts
showIndex: boolean;
```

If `true`, an image number appears in the list (for example, **1/5**).

##### timestamp

```ts
timestamp: boolean;
```

If `true`, enables the timestamp.

***

### IImageCarouselPreloaderConfig

Preloader configuration

#### Properties

##### enabled

```ts
enabled: boolean;
```

if true, show preloader while images not loaded

##### loadedCountToHide?

```ts
optional loadedCountToHide?: number;
```

Number of loaded images enough to hide preloader

##### text?

```ts
optional text?: string;
```

Preloader message