@aurigma/ui-framework/docs/reference/interfaces/iimagecarouselconfig.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Interface: IImageCarouselConfig

Provides properties for the `image-carousel` widget.

You can use these properties in **params** of the [AuWidgetImageCarousel](../classes/auwidgetimagecarousel.md) class.
```
{
  "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"
          }
        ]
      }
    }
  ]
}
```

## Hierarchy

* **IImageCarouselConfig**

## Index

### Properties

* [arrowButtonsEnabled](iimagecarouselconfig.md#arrowbuttonsenabled)
* [autoPlay](iimagecarouselconfig.md#autoplay)
* [containerColor](iimagecarouselconfig.md#containercolor)
* [imageSelectorAlignment](iimagecarouselconfig.md#imageselectoralignment)
* [imageSelectorPosition](iimagecarouselconfig.md#imageselectorposition)
* [images](iimagecarouselconfig.md#images)
* [lightbox](iimagecarouselconfig.md#lightbox)
* [onChange](iimagecarouselconfig.md#optional-onchange)
* [preloader](iimagecarouselconfig.md#preloader)
* [resetIndexOnUpdate](iimagecarouselconfig.md#resetindexonupdate)
* [showImageHeader](iimagecarouselconfig.md#showimageheader)
* [showIndex](iimagecarouselconfig.md#showindex)
* [timestamp](iimagecarouselconfig.md#timestamp)

## Properties

###  arrowButtonsEnabled

• **arrowButtonsEnabled**: *boolean*

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

___

###  autoPlay

• **autoPlay**: *number*

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

___

###  containerColor

• **containerColor**: *string*

The color of the image container.

___

###  imageSelectorAlignment

• **imageSelectorAlignment**: *string*

___

###  imageSelectorPosition

• **imageSelectorPosition**: *string*

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

___

###  images

• **images**: *Array‹[IImage](iimage.md)›*

An array of images.

___

###  lightbox

• **lightbox**: *boolean*

If `true`, enables the lightbox.

___

### `Optional` onChange

• **onChange**? : *Function[]*

Functions, that executed after current image changed.

___

###  preloader

• **preloader**: *[IImageCarouselPreloaderConfig](iimagecarouselpreloaderconfig.md)*

carousel preloader settings

___

###  resetIndexOnUpdate

• **resetIndexOnUpdate**: *boolean*

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

___

###  showImageHeader

• **showImageHeader**: *boolean*

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

___

###  showIndex

• **showIndex**: *boolean*

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

___

###  timestamp

• **timestamp**: *boolean*

If `true`, enables the timestamp.