<Carousel --min-height="300px">
  <CarouselItem>
    <img src="https://picsum.photos/id/10/600/300">
  </CarouselItem>
  <CarouselItem>
    <img src="https://picsum.photos/id/22/600/300">
  </CarouselItem>
  <CarouselItem>
    <img src="https://picsum.photos/id/25/600/300">
  </CarouselItem>
  <CarouselItem>
    <img src="https://picsum.photos/id/43/600/300">
  </CarouselItem>
  <CarouselItem>
    <img src="https://picsum.photos/id/45/600/300">
  </CarouselItem>
</Carousel>

<Carousel>
  <CarouselItem>
    <Hero title="Hey there!" />
  </CarouselItem>
  <CarouselItem>
    <Hero title="How you like spaper? :D" />
  </CarouselItem>
  <CarouselItem>
    <Hero title="See ya!" />
  </CarouselItem>
</Carousel>

<script>
import { Button, Carousel, CarouselItem } from 'spaper'
</script>

<Carousel --min-height="300px">
  {#snippet controls({ index, length, next, previous })}
    <div class="mt-2 flex items-center justify-center gap-2">
      <Button size="small" onclick={previous}>Prev</Button>
      <span>{index + 1} / {length}</span>
      <Button size="small" onclick={next}>Next</Button>
    </div>
  {/snippet}
  <CarouselItem>
    <img src="https://picsum.photos/id/10/600/300">
  </CarouselItem>
  <CarouselItem>
    <img src="https://picsum.photos/id/22/600/300">
  </CarouselItem>
  <CarouselItem>
    <img src="https://picsum.photos/id/25/600/300">
  </CarouselItem>
</Carousel>

<script>
import { Carousel, CarouselItem } from 'spaper'

const slides = [
  'https://picsum.photos/id/10/600/300',
  'https://picsum.photos/id/22/600/300',
  'https://picsum.photos/id/25/600/300',
]
</script>

<Carousel autoplay={false} --min-height="300px">
  {#snippet controls({ index, goTo })}
    <div class="mt-2 flex justify-center gap-2">
      {#each slides as src, i}
        <button
          type="button"
          class={[
            'cursor-pointer overflow-hidden border-paper p-0',
            'opacity-70 transition hover:opacity-100 hover:shadow-paper',
            i === index && 'border-primary opacity-100',
          ]}
          onclick={() => goTo(i)}
        >
          <img {src} alt="" class="block h-12 w-20 object-cover" />
        </button>
      {/each}
    </div>
  {/snippet}
  {#each slides as src, i}
    <CarouselItem>
      <img {src} alt="Slide {i + 1}">
    </CarouselItem>
  {/each}
</Carousel>