Svelte Carousel - Flowbite

<script>
  import { Carousel, CarouselTransition } from 'flowbite-svelte'
  // ./imageData/+server.js has the following
  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>

<script>
  import { Carousel } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';
</script>

<div class="max-w-4xl">
  <Carousel {images} />
</div>

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

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

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

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

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

<script>
  import { Carousel, ChevronLeft, ChevronRight } from 'flowbite-svelte'
  import { images } from './imageData/+server.js';

  let icons={
    next: ChevronRight,
    prev: ChevronLeft,
  }
  let iconSize =20
  let iconClass = 'text-white dark:text-red-500';
  let showThumbs = false;
  let showCaptions = false;
</script>

<div class="max-w-4xl">
  <Carousel {images} {showThumbs} {showCaptions} {icons} {iconSize} {iconClass}/>
</div>

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

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

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

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