--- layout: componentLayout title: Svelte Carousel - Flowbite breadcrumb_title: Carousel dir: Components description: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options --- Home {dir} {breadcrumb_title} {title} {description} Carousel CarouselTransition The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators. ```html ``` ```svelte example
```

Use `loop` prop to loop the carousel. Use `duration=number` to set the interval

```svelte example
```

The `showThumbs` is set to `true`. Set it to `false` to hide it.

```svelte example
```

To hide the caption, set `showCaptions` to `false`.

```svelte example
```

To hide the indicators, set `showIndicators` to `false`.

```svelte example
```

To hide the slide controllers, set `slideControls` to `false`.

```svelte example
```

You can add custom slide controllers using Svelte-Heros icons. Change the size using the `iconSize` prop and style with the `iconClass` prop.

```html
``` ```svelte example
```

Use `loop` prop to loop the carousel. Use `duration=number` to set the interval

```svelte example
``` ```svelte example
``` ```svelte example
```

The component has the following props, type, and default values. See types page for type information.

Carousel

CarouselTransition

Flowbite carousel