@aurigma/ui-framework/docs/reference/classes/auwidgetimagecarousel.md

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

# Class: AuWidgetImageCarousel

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

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

```
{
  "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

  ↳ [AuBaseWidget](aubasewidget.md)

  ↳ **AuWidgetImageCarousel**

## Implements

* [IWidget](../interfaces/iwidget.md)
* [IRestorableWidget](../interfaces/irestorablewidget.md)

## Index

### Properties

* [_isLoaded](auwidgetimagecarousel.md#_isloaded)
* [currentImageTitle](auwidgetimagecarousel.md#currentimagetitle)
* [images](auwidgetimagecarousel.md#images)
* [imagesCount](auwidgetimagecarousel.md#imagescount)
* [params](auwidgetimagecarousel.md#params)

### Methods

* [backImage](auwidgetimagecarousel.md#backimage)
* [checkInitDependenciesWidgets](auwidgetimagecarousel.md#checkinitdependencieswidgets)
* [exportWidgetData](auwidgetimagecarousel.md#exportwidgetdata)
* [loadedCountChanged](auwidgetimagecarousel.md#loadedcountchanged)
* [nextImage](auwidgetimagecarousel.md#nextimage)
* [resetPreloaderState](auwidgetimagecarousel.md#resetpreloaderstate)
* [restoreWidgetFromData](auwidgetimagecarousel.md#restorewidgetfromdata)
* [selectImage](auwidgetimagecarousel.md#selectimage)
* [showPreloader](auwidgetimagecarousel.md#showpreloader)
* [showToast](auwidgetimagecarousel.md#showtoast)

## Properties

###  _isLoaded

• **_isLoaded**: *boolean* = false

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

___

###  currentImageTitle

• **currentImageTitle**: *string* = ""

The title of the current image.

___

###  images

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

An array of images displayed in the widget.

___

###  imagesCount

• **imagesCount**: *number* = 0

The number of images displayed in the widget.

___

###  params

• **params**: *[IImageCarouselConfig](../interfaces/iimagecarouselconfig.md)*

*Implementation of [IWidget](../interfaces/iwidget.md).[params](../interfaces/iwidget.md#optional-params)*

*Overrides [AuBaseWidget](aubasewidget.md).[params](aubasewidget.md#params)*

Properties of the widget.

## Methods

###  backImage

▸ **backImage**(): *void*

go to previous image

**Returns:** *void*

___

###  checkInitDependenciesWidgets

▸ **checkInitDependenciesWidgets**(): *string[]*

*Inherited from [AuBaseWidget](aubasewidget.md).[checkInitDependenciesWidgets](aubasewidget.md#checkinitdependencieswidgets)*

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

**Returns:** *string[]*

___

###  exportWidgetData

▸ **exportWidgetData**(`force`: boolean): *Promise‹ImageCarouselData›*

*Implementation of [IRestorableWidget](../interfaces/irestorablewidget.md)*

**Parameters:**

Name | Type |
------ | ------ |
`force` | boolean |

**Returns:** *Promise‹ImageCarouselData›*

___

###  loadedCountChanged

▸ **loadedCountChanged**(): *void*

**Returns:** *void*

___

###  nextImage

▸ **nextImage**(): *void*

go to next image

**Returns:** *void*

___

###  resetPreloaderState

▸ **resetPreloaderState**(): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[resetPreloaderState](aubasewidget.md#resetpreloaderstate)*

**Returns:** *void*

___

###  restoreWidgetFromData

▸ **restoreWidgetFromData**(`widgetData`: ImageCarouselData, `force`: boolean): *Promise‹void›*

**Parameters:**

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

**Returns:** *Promise‹void›*

___

###  selectImage

▸ **selectImage**(`index`: number): *void*

select image by index

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`index` | number |   |

**Returns:** *void*

___

###  showPreloader

▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showPreloader](aubasewidget.md#showpreloader)*

Shows a preloader.

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

**Parameters:**

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

**Returns:** *void*

___

###  showToast

▸ **showToast**(`data?`: string, `duration?`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showToast](aubasewidget.md#showtoast)*

Shows a toast.

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

**Parameters:**

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

**Returns:** *void*