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>