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

# au-widget-image-carousel/au-widget-image-carousel

> A widget that is used to display multiple images arranged as an image carousel.

## Classes

### AuWidgetImageCarousel

For details, you can refer to the [ImageCarousel widget](https://customerscanvas.com/dev/ui-framework/widgets/image-carousel.html) topic.

```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"
          }
        ]
      }
    }
  ]
}
```

#### Extends

- [`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget)

#### Implements

- [`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget)

#### Constructors

##### Constructor

```ts
new AuWidgetImageCarousel(): AuWidgetImageCarousel;
```

###### Returns

[`AuWidgetImageCarousel`](#auwidgetimagecarousel)

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`constructor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#constructor-1)

#### Properties

##### \_isLoaded

```ts
_isLoaded: boolean = false;
```

indicates if widget got initial params and subscribed on au-responsive-images 'load' event

##### currentImageTitle

```ts
currentImageTitle: string = "";
```

The title of the current image.

##### images

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

An array of images displayed in the widget.

##### imagesCount

```ts
imagesCount: number = 0;
```

The number of images displayed in the widget.

##### params

```ts
params: IImageCarouselConfig;
```

Properties of the widget.

###### Overrides

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`params`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#params-1)

#### Methods

##### backImage()

```ts
backImage(): void;
```

go to previous image

###### Returns

`void`

##### checkInitDependenciesWidgets()

```ts
checkInitDependenciesWidgets(): string[];
```

Returns an array of widget names, due to which the current widget cannot receive parameters.

###### Returns

`string`[]

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`checkInitDependenciesWidgets`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#checkinitdependencieswidgets-1)

##### exportWidgetData()

```ts
exportWidgetData(force): Promise<ImageCarouselData>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `force` | `boolean` |

###### Returns

`Promise`\<`ImageCarouselData`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`exportWidgetData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#exportwidgetdata)

##### loadedCountChanged()

```ts
loadedCountChanged(): void;
```

###### Returns

`void`

##### nextImage()

```ts
nextImage(): void;
```

go to next image

###### Returns

`void`

##### resetPreloaderState()

```ts
resetPreloaderState(): void;
```

###### Returns

`void`

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`resetPreloaderState`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#resetpreloaderstate-1)

##### restoreWidgetFromData()

```ts
restoreWidgetFromData(widgetData, force): Promise<void>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `widgetData` | `ImageCarouselData` |
| `force` | `boolean` |

###### Returns

`Promise`\<`void`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`restoreWidgetFromData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#restorewidgetfromdata)

##### selectImage()

```ts
selectImage(index): void;
```

select image by index

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `index` | `number` | - |

###### Returns

`void`

##### showPreloader()

```ts
showPreloader(
   isPreload, 
   message?, 
   timeout?): void;
```

Shows a preloader.

```
"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]
```

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `isPreload` | `boolean` | `undefined` | If `true`, enables the preloader. |
| `message` | `string` \| `string`[] | `...` | A text message that appears next to the preloader. |
| `timeout` | `number` | `5` | - |

###### Returns

`void`

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showpreloader-1)

##### showToast()

```ts
showToast(data?, duration?): void;
```

Shows a toast.

```
return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data?` | `string` | A string message to display in the toast. |
| `duration?` | `number` | Defines how long to show the toast for. |

###### Returns

`void`

###### Inherited from

[`AuBaseWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubasewidget).[`showToast`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showtoast-1)

## References

### widget

Renames and re-exports [AuWidgetImageCarousel](#auwidgetimagecarousel)