Svelte Carousel - Flowbite

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

Carousel: View Source Code

CarouselTransition: View Source Code

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

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

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

Flowbite carousel