# Carousel

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

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](/reference/servoycore/dev-api/js-lib/number.md) 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](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "Reduce"

***

### lazyLoading

When true, slides are loaded lazily as needed. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### noTransition

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

***

### responsiveHeight

Height used for responsive layouts. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) 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](/reference/servoycore/dev-api/database-manager/jsfoundset.md)

***

### styleClass

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

***

### updateRecordSelection

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

***

### visible

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

***

## Events

### onSlideClicked(event,slide)

Fired when a slide is clicked.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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](/reference/servoycore/dev-api/js-lib/number.md) Index The 0-based index of the currently selected slide.

***

### removeSlide(index)

Removes the slide at the given index (0 based)

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)} 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](/reference/servoycore/dev-api/js-lib/string.md)
* propertyValue
  * The value assigned to the CSS property.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## slide

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

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

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/media/carousel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.