# Carousel

![Transitions & styles can be used to customize the look of Carousel modules](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FrkufcNbA0aAG9J6KhFEO%2Fcarousel-module.png?alt=media\&token=07ef6516-82ec-4194-93b7-f362953b40ce)

## Overview

The **Carousel module** allows for multiple media assets to be placed in a container that can be autoplayed or swiped through based on speed, view and other settings.

## Carousel Properties <a href="#properties" id="properties"></a>

**Speed**\
\&#xNAN;*Number, default `300`*\
Sets the speed (in milliseconds) between animations of slides.

**Slides Per View**\
\&#xNAN;*Number, 1*\
Number of images that can be seen in the carousel at a time.

**Space Between**\
\&#xNAN;*String, default* `30`\
Space between images (in px) in the carousel.

**Loop Slides**\
\&#xNAN;*Checkbox, default `enabled`*\
If enabled, the slideshow should restart on carousel end.

**Autoplay**\
\&#xNAN;*Checkbox, default `disabled`*\
If enabled, the carousel with automatically start playing on load.

**Pagination**\
C*heckbox, default `enabled`*\
If enabled, it will display clickable slide indicators below the carousel.

**Navigation**\
\&#xNAN;*Checkbox, default `enabled`*\
If enabled, display on the left and right of the carousel to help with navigation of images.

[**Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/height)\
\&#xNAN;*String*\
Swiper height (in px). This parameter allows to force Swiper height.

{% hint style="warning" %}
Setting this parameter will make Swiper not responsive to changes in screen and viewport sizes.
{% endhint %}

### Carousel Styles

**Theme Color**\
\&#xNAN;*String - Valid color string or hex code (`#FFFFF`)*\
Sets the color of navigation arrows and the active pagination indicator.

**Navigation Size**\
\&#xNAN;*String*\
Sets the size of the left and right navigation arrows (in px). Example: `44px`

**Transition Effect** (required)\
\&#xNAN;*Dropdown*\
Applies a transition effect when slides change. Options include:

* `slide`
* `fade`
* `cube`
* `coverflow`
* `flip`
* `creative`
* `cards`

## Nodes <a href="#nodes" id="nodes"></a>

### Broadcasters

#### Carousel:slide-change

Broadcast event when slide changes.

**Parameters**

slideIndex - The index of the slide you would like to change to

### **Listeners**

**Carousel:on-slide-change**\
Listener event when a slide changes