Scroll Snap Events

const carousel = document.querySelector(".carousel") as HTMLElement;
const videos = carousel.querySelectorAll("video");

carousel.addEventListener("scrollsnapchange", (event) => {
  (event.snapTargetInline as HTMLVideoElement)?.play();
});

carousel.addEventListener("scrollsnapchanging", () => {
  videos.forEach((video) => video.pause());
});

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

.slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  scroll-snap-align: center;
  object-fit: cover;
  border-radius: 0.5rem;
}

<BlossomCarousel class="carousel">
  <video
    class="slide"
    src="cat.mp4"
    playsinline
    loop
    muted
    preload="metadata"
  ></video>
  <video
    class="slide"
    src="corgi.mp4"
    playsinline
    loop
    muted
    preload="metadata"
  ></video>
  <video
    class="slide"
    src="bunny.mp4"
    playsinline
    loop
    muted
    preload="metadata"
  ></video>
  ...
</BlossomCarousel>