Slideshow

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  scroll-snap-type: x mandatory;
  height: 22.5rem;
}

.slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: center;

  view-timeline: --slide inline;
}

.slide .card {
  width: 100%;
  height: 100%;

  animation: parallax linear both;
  animation-timeline: --slide;
  animation-range: cover;
}

@keyframes parallax {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

<BlossomCarousel class="carousel">
  <div class="slide">
    <div class="card"></div>
  </div>
  <div class="slide">
    <div class="card"></div>
  </div>
  <div class="slide">
    <div class="card"></div>
  </div>
  ...
</BlossomCarousel>

.slide {
  view-timeline: --slide inline;
}

.slide .card {
  animation: parallax linear both;
  animation-timeline: --slide;
  animation-range: cover;
}

@keyframes parallax {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

<BlossomCarousel
  class="grid! h-90 snap-x snap-mandatory auto-cols-[100%] grid-flow-col"
>
  <div class="slide size-full overflow-hidden snap-center">
    <div class="card size-full"></div>
  </div>
  <div class="slide size-full overflow-hidden snap-center">
    <div class="card size-full"></div>
  </div>
  <div class="slide size-full overflow-hidden snap-center">
    <div class="card size-full"></div>
  </div>
  ...
</BlossomCarousel>