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>

Default Carousel

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

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

Carousel transition

<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

<CarouselTransition {images} transitionType="fly" transitionParams="{{delay: 250, duration: 300, x: 100}}" />

Slide example

<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

CarouselTransition

References