Buttons

<BlossomCarousel id="gallery" class="carousel">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  ...
</BlossomCarousel>

<div class="controls">
  <BlossomPrev for="gallery" />
  <BlossomNext for="gallery" />
</div>

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 1rem;
  scroll-snap-type: inline mandatory;
}

.slide {
  width: 100%;
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
}

.controls {
  display: flex;
  gap: 1rem;
}

<BlossomCarousel id="gallery" class="grid auto-cols-[200px] snap-x snap-mandatory grid-flow-col gap-4">
  <div class="w-full aspect-3/4 snap-center"></div>
  <div class="w-full aspect-3/4 snap-center"></div>
  <div class="w-full aspect-3/4 snap-center"></div>
  ...
</BlossomCarousel>

<div class="flex gap-4">
  <BlossomPrev for="gallery" />
  <BlossomNext for="gallery" />
</div>