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 #

  • Svelte
<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

Cosmic timetraveler Cristina Gottardi Johannes Plenio Jonatan Pie Mark Harpur Pietro De Grandi Sergey Pesterev Solo travel goals
  • 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

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

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

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

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

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

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

  let icons={
    next: ChevronRight,
    prev: ChevronLeft,
  }
  let iconSize =20
  let iconClass = 'text-white dark:text-red-500';
  let showThumbs = false;
  let showCaptions = false;
</script>

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

Carousel transition #

Cosmic timetraveler

Cosmic timetraveler Cristina Gottardi Johannes Plenio Jonatan Pie Mark Harpur Pietro De Grandi Sergey Pesterev Solo travel goals
  • 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

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

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

  • 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 IndicatorColorType 'gray'
rounded boolean false
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md'
border boolean false
placement IndicatorPlacementType 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