Carousel transition

Example

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

Related components

References