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