# Image Carousel

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-1333032adf7ccf866a5186c9dbb8ffd7de98ff26%2Fimage%20(17).png?alt=media" alt=""><figcaption></figcaption></figure>

## Basic

#### Data

Provide the JSON formatted array of links to the images. Recommended to use valid or active links as the widget expects the links to be working.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-ef420a9bf10389f228fb27888491aa229b37a332%2Fimage%20(61).png?alt=media" alt=""><figcaption></figcaption></figure>

## Interaction

### Default

<mark style="color:blue;">**`Click`**</mark> - This is triggered when this is used as a default button and the user clicks on it.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-10d7e996143043db710b8170f9d28197efd79027%2Fimage%20(188).png?alt=media" alt=""><figcaption></figcaption></figure>

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

#### Loading

It will be useful when there is a process to be carried out, like running a query to fetch data, before the widget is loaded. The `loading` boolean value can be utilized to show the spinner till the process is complete.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-c67f2b672db6a42ef8815bae1bc6c9fb4d5bea53%2Fimage%20(223).png?alt=media" alt=""><figcaption><p>Loading state</p></figcaption></figure>

#### AutoPlay

The series of images are cycled through in a constant loop without any breaks if this property is set ON.

## Layout

#### Show Navigation Dots

This is the set of dots located underneath the image set. Each dot links to the corresponding image. It is a simple visual indication that the images are moving.

#### Navigation Dots position

| Property | Description                                                             |
| -------- | ----------------------------------------------------------------------- |
| Top      | The dots are placed over the image set.                                 |
| Bottom   | The dots are placed at the bottom of the image set.                     |
| Left     | The dots are placed on the left side of the widget layout, vertically.  |
| Right    | The dots are placed on the right side of the widget layout, vertically. |

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>Users can change the colour of the widget background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.</td></tr></tbody></table>