# Carousel

(part of package '[Bootstrap Extra Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

A component that displays a slideshow of images with optional captions.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### cycleInterval

Interval (in milliseconds) at which the carousel automatically cycles through slides. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 5000

***

### imageCss

An array of CSS property objects to be applied to images within the carousel. Type: [Array\<CustomType\<bootstrapextracomponents-carousel.cssProperty>>](#cssproperty)

***

### imageOptions

Options for displaying images within the carousel (e.g., "Reduce", "Crop", etc.). Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "Reduce"

***

### lazyLoading

When true, slides are loaded lazily as needed. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### location

The position of the carousel component on the form. Type: [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md)

***

### noPause

When true, the carousel does not pause cycling on user interaction. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### noTransition

When true, transition effects between slides are disabled. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### responsiveHeight

Height used for responsive layouts. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 300

***

### slides

An array of slide objects to be displayed in the carousel. Type: [Array\<CustomType\<bootstrapextracomponents-carousel.slide>>](#slide)

***

### slidesFoundset

A foundset that provides slide data. Type: [JSFoundset](https://docs.servoy.com/reference/servoycore/dev-api/database-manager/jsfoundset)

***

### styleClass

CSS style classes applied to the carousel component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### updateRecordSelection

When `true` the foundset's selection is updated with any slide selection Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### visible

Flag indicating whether the carousel is visible. Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onSlideClicked(event,slide)

Fired when a slide is clicked.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the click event e.g. target element, mouse coordinates
> * {[CustomType\<bootstrapextracomponents-carousel.slide>](#slide)} slide The slide object that was clicked

***

## API

### addSlide(slideToAdd)

Adds the given slide

**Parameters:**

> * {[CustomType\<bootstrapextracomponents-carousel.slide>](#slide)} slideToAdd The slide object to be added to the collection.

***

### getSelectedIndex()

Returns the index of the currently selected slide (0 based)

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Index The 0-based index of the currently selected slide.

***

### removeSlide(index)

Removes the slide at the given index (0 based)

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The 0-based index of the slide to be removed or set as selected.

***

### setSelectedIndex(index)

Sets the selected slide to the given index (0 based)

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The 0-based index of the slide to be removed or set as selected.

***

### setSlides(slides)

Sets the given slides

**Parameters:**

> * {[Array\<CustomType\<bootstrapextracomponents-carousel.slide>>](#slide)} slides An array of slide objects to set as the current collection of slides.

***

## Types

## cssProperty

Represents a CSS property used to style carousel images. scripting type: CustomType\<bootstrapextracomponents-carousel.cssProperty>

* propertyName
  * The name of the CSS property.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* propertyValue
  * The value assigned to the CSS property.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

## slide

Represents a slide in the carousel. scripting type: CustomType\<bootstrapextracomponents-carousel.slide>

* caption
  * The caption text displayed with this slide.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)
* imageUrl
  * The URL of the image for this slide.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***