Svelte Carousel - Flowbite

Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options

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

Setup #

<script>
  import { Carousel, CarouselTransition } from 'flowbite-svelte'
  // ./imageData/+server.js has the following
  export const images = [
  {
    id: 0,
    name: "Cosmic timetraveler",
    imgurl: "/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp",
    attribution: "cosmic-timetraveler-pYyOZ8q7AII-unsplash.com",
  },
  {
    id: 1,
    name: "Cristina Gottardi",
    imgurl: "/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp",
    attribution: "cristina-gottardi-CSpjU6hYo_0-unsplash.com",
  },
  {
    id: 2,
    name: "Johannes Plenio",
    imgurl: "/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp",
    attribution: "johannes-plenio-RwHv7LgeC7s-unsplash.com",
  },
  {
    id: 3,
    name: "Jonatan Pie",
    imgurl: "/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp",
    attribution: "jonatan-pie-3l3RwQdHRHg-unsplash.com",
  },
  {
    id: 4,
    name: "Mark Harpur",
    imgurl: "/images/carousel/mark-harpur-K2s_YE031CA-unsplash.webp",
    attribution: "mark-harpur-K2s_YE031CA-unsplash",
  },
  {
    id: 5,
    name: "Pietro De Grandi",
    imgurl: "/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.webp",
    attribution: "pietro-de-grandi-T7K4aEPoGGk-unsplash",
  },
  {
    id: 6,
    name: "Sergey Pesterev",
    imgurl: "/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.webp",
    attribution: "sergey-pesterev-tMvuB9se2uQ-unsplash",
  },
  {
    id: 7,
    name: "Solo travel goals",
    imgurl: "/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.webp",
    attribution: "solotravelgoals-7kLufxYoqWk-unsplash",
  },
];
</script>

Default Carousel #

Example

Cosmic timetraveler

Svelte

<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
</script>

<div class="max-w-4xl">
  <Carousel {images} />
</div>

Loop #

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

Example
Svelte
<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
  let showThumbs=false
  let showCaptions=false
</script>

<div class="max-w-4xl">
  <Carousel {images} loop {showCaptions} {showThumbs} duration="3000"/>
</div>

Without thumbnails #

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

Example

Cosmic timetraveler

Svelte

<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
  let showThumbs=false
</script>

<div class="max-w-4xl">
  <Carousel {images} {showThumbs}/>
</div>

Without caption #

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

Example
Svelte
<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
  let showThumbs=false
  let showCaptions=false
</script>

<div class="max-w-4xl">
  <Carousel {images} {showThumbs} {showCaptions}/>
</div>

Without indicators #

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

Example
Svelte
<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
  let showThumbs=false
  let showCaptions=false
  let showIndicators=false
</script>

<div class="max-w-4xl">
  <Carousel {images} {showThumbs} {showCaptions} {showIndicators}/>
</div>

Without slide controllers #

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

Example
Svelte
<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
  let showThumbs=false
  let showCaptions=false
  let slideControls=false
</script>

<div class="max-w-4xl">
  <Carousel {images} {showThumbs} {showCaptions} {slideControls}/>
</div>

Custom slide controllers #

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

<script>
  import {ChevronDoubleLeft, ChevronDoubleRight } from 'svelte-heros-v2'
  let icons={
    next: ChevronDoubleRight,
    prev: ChevronDoubleLeft,
  }
  let iconSize =20
  let iconClass = 'text-white dark:text-red-500';
</script>

<div class="max-w-4xl">
  <Carousel {images} {showThumbs} {showCaptions} {icons} {iconSize} {iconClass}/>
</div>

Carousel transition #

Example

Cosmic timetraveler

Svelte

<script>
  import { CarouselTransition } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
</script>

<div class="max-w-4xl">
  <CarouselTransition {images} transitionType="fade" transitionParams="{{delay: 300, duration: 500}}"/>
</div>

Loop #

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

Example
Svelte
<script>
  import { CarouselTransition } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
</script>

<div class="max-w-4xl">
  <CarouselTransition {images} loop transitionType="fade" transitionParams="{{ duration: 1000 }}" showCaptions={false} showThumbs={false} duration="5000" />
</div>

Fly example #

Example
Svelte
<script>
  import { CarouselTransition } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
</script>
<div class="max-w-4xl">
  <CarouselTransition {images} transitionType="fly" transitionParams="{{delay: 250, duration: 300, x: 100}}" showCaptions={false} showThumbs={false} />
</div>

Slide example #

Example
Svelte
<script>
  import { CarouselTransition } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
  import { bounceInOut } from 'svelte/easing';
</script>
<div class="max-w-4xl">
  <CarouselTransition {images} transitionType="slide" transitionParams="{{duration: 1500, easing: bounceInOut}}" showCaptions={false} showThumbs={false}/>
</div>

Props #

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

Carousel

Name	Type	Default
showIndicators	boolean	true
showCaptions	boolean	true
showThumbs	boolean	true
images	any[]
slideControls	boolean	true
loop	boolean	false
duration	number	2000
divClass	string	'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96'
indicatorDivClass	string	'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2'
captionClass	string	'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center'
indicatorClass	string	'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60'
slideClass	string	''

CarouselTransition

Name	Type	Default
showIndicators	boolean	true
showCaptions	boolean	true
showThumbs	boolean	true
images	any[]
slideControls	boolean	true
transitionType	TransitionTypes	'fade'
transitionParams	TransitionParamTypes	{}
loop	boolean	false
duration	number	2000
divClass	string	'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96'
indicatorDivClass	string	'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2'
captionClass	string	'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center'
indicatorClass	string	'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60'

Caption

Name	Type	Default
caption	string	''
captionClass	string	''

Indicator

Name	Type	Default
color	\| 'gray' \| 'dark' \| 'blue' \| 'green' \| 'red' \| 'purple' \| 'indigo' \| 'yellow' \| 'teal' \| 'none'	'gray'
rounded	boolean	false
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
border	boolean	false
placement	\| 'top-left' \| 'top-center' \| 'top-right' \| 'center-left' \| 'center' \| 'center-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' \| undefined	undefined
offset	boolean	true

Slide

Name	Type	Default
image	string	''
altTag	string	''
attr	string	''
slideClass	string	''

Thumbnail

Name	Type	Default
thumbImg	string	''
altTag	string	''
titleLink	string	''
id	number
thumbWidth	number
selected	boolean	false

References #

Flowbite carousel