Thumbnails

<BlossomCarousel id="gallery" class="grid auto-cols-[100%] aspect-square snap-x snap-mandatory grid-flow-col">
  <div v-for="image in images" :key="image" data-blossom-slide class="w-full snap-center">
    <img :src="image" />
  </div>
</BlossomCarousel>

<BlossomDots for="gallery" class="flex flex-col gap-1">
  <template #default="{ index, active }">
    <BlossomDot :data-active="active">
      <img :src="images[index]" />
    </BlossomDot>
  </template>
</BlossomDots>

<BlossomCarousel id="gallery" className="grid auto-cols-[100%] aspect-square snap-x snap-mandatory grid-flow-col">
  {images.map((_, index) => (
    <div key={index} data-blossom-slide className="w-full snap-center">
      <img src={images[index]} />
    </div>
  ))}
</BlossomCarousel>

<BlossomDots for="gallery" className="flex flex-col gap-1">
  {({ index, active }) => (
    <BlossomDot data-active={active}>
      <img src={images[index]} />
    </BlossomDot>
  )}
</BlossomDots>

<BlossomCarousel id="gallery" class="grid auto-cols-[100%] aspect-square snap-x snap-mandatory grid-flow-col">
  {#each images as image, index (image)}
    <div data-blossom-slide class="w-full snap-center">
      <img src={image} />
    </div>
  {/each}
</BlossomCarousel>

<BlossomDots forId="gallery" class="flex flex-col gap-1">
  {#snippet children({ index, active })}
    <BlossomDot data-active={active}>
      <img src={images[index]} />
    </BlossomDot>
  {/snippet}
</BlossomDots>