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 #

Cosmic timetraveler

<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

<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.

Cosmic timetraveler

<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`.

<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`.

<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`.

<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 #

Cosmic timetraveler

<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

<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 #

<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 #

<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