Carousel transition
Example
Cristina Gottardi
<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
<CarouselTransition {images} transitionType="fly" transitionParams="{{delay: 250, duration: 300, x: 100}}" />Slide example
Cristina Gottardi
<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.