Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Carousel

The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators.

Default Carousel

Set the `duration` prop to define the time interval for chaning images. Time is set in miliseconds. The default value for `duration` is set to zero that means no autochange of images. In that case you can control which image is displayed by the `index` prop.
Cosmic timetraveler

Controls

Use the internal `Controls` component to listen to click events which will trigger the slide event from the carousel component to each direction. You can customize the control elements with the `class` property.
Cosmic timetraveler

Indicators

Show the carousel indicators by adding the internal `Indicators` component.
Cosmic timetraveler

Thumbnails

You can control the `Carousel` component externally by the `index` prop. Here is an example how to use the `Thumbnails` component to achieve that.
Cosmic timetraveler

Caption

The `Carousel` exposes the `change` event containing info about the currently displayed image. You can use it to build custom caption for the carousel.
Cosmic timetraveler

Carousel with links

You can use `slot="slide"` and internal component `Slide` to control the image display. Here's an example how to wrap images with the anchor element.
Cosmic timetraveler

Customization

Basic customization

Cosmic timetraveler

Advanced customization

Cosmic timetraveler

Custom Carousel transition

Cosmic timetraveler