Carousel

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 'flowbite-svelte'
</script>

Cosmic timetraveler

Cosmic timetravelerCristina GottardiJohannes PlenioJonatan PieMark HarpurPietro De GrandiSergey PesterevSolo travel goals
<script>
  import { Carousel } from '$lib';
  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>

<Carousel {images} />

Loop

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

<script>
  let showThumbs=false
  let showCaptions=false
</script>

<Carousel {images} loop {showCaptions} {showThumbs} duration="3000" />

Without thumbnails

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

Cosmic timetraveler

<script>
    let showThumbs=false
</script>

<Carousel {images} {showThumbs}/>

Without caption

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

<script>
  let showThumbs=false
  let showCaptions=false
</script>

<Carousel {images} {showThumbs} {showCaptions}/>

Without indicators

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

<script>
  let showThumbs=false
  let showCaptions=false
  let showIndicators=false
</script>

<Carousel {images} {showThumbs} {showCaptions} {showIndicators}/>

Without slide controllers

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

<script>
  let showThumbs=false
  let showCaptions=false
  let slideControls=false
</script>

<Carousel {images} {showThumbs} {showCaptions} {slideControls}/>

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

Cristina Gottardi

Cosmic timetravelerCristina GottardiJohannes PlenioJonatan PieMark HarpurPietro De GrandiSergey PesterevSolo travel goals
<script>
  import { CarouselTransition } from 'flowbite-svelte';
</script>

<CarouselTransition {images} transitionType="slide" transitionParams="{{delay: 300, duration: 500}}"/>

Loop

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

<script>
  let showThumbs=false
  let showCaptions=false
</script>

<CarouselTransition {images} loop transitionType="fade" transitionParams="{{ duration: 1000 }}" {showCaptions} {showThumbs} duration="5000" />

Fly example

Cristina Gottardi

Cosmic timetravelerCristina GottardiJohannes PlenioJonatan PieMark HarpurPietro De GrandiSergey PesterevSolo travel goals
<CarouselTransition {images} transitionType="fly" transitionParams="{{delay: 250, duration: 300, x: 100}}" />

Slide example

Cristina Gottardi

Cosmic timetravelerCristina GottardiJohannes PlenioJonatan PieMark HarpurPietro De GrandiSergey PesterevSolo travel goals
<script>
  import { CarouselTransition } from 'flowbite-svelte';
  import { bounceInOut } from 'svelte/easing';
</script>

<CarouselTransition {images} transitionType="slide" transitionParams="{{duration: 1500, easing: bounceInOut}}"/>

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. Please read Carousel default for more details.

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
icons CarouselIconType { next: ChevronRight, prev: ChevronLeft }
iconSize number 24
iconClass string 'text-white sm:w-6 sm:h-6 dark:text-gray-300'
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
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'
icons CarouselIconType { next: ChevronRight, prev: ChevronLeft }
iconSize number 24
iconClass string 'text-white sm:w-6 sm:h-6 dark:text-gray-300'
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'

References