Scroll X Carousel

Carousel that transforms on the x-axis, showing items depnding on the scroll position, with a progress indicator (optional).

New Prop added

add new prop strain to <ScrollXCarouselWrap /> to add moving effect.

Open in 21st dev

Installation

Usage

<ScrollXCarousel className="h-[150vh]">
  <ScrollXCarouselContainer className="min-h-dvh place-content-center space-y-6">
    <div className=" pointer-events-none w-[5vw] h-[103%] absolute inset-[0_auto_0_0] z-10 bg-[linear-gradient(90deg,_var(--background)_15%,_transparent)]" />
    <div className="pointer-events-none bg-[linear-gradient(270deg,_var(--background)_15%,_transparent)] w-[5vw] h-[103%] absolute inset-[0_0_0_auto] z-10" />

    <ScrollXCarouselWrap
      className="flex space-x-8 [&>*:first-child]:ml-8"
      strain
    >
      {SLIDES.map((slide, index) => (
        <div key={index} className="min-w-[260px] max-h-[70vh]">
          <img
            alt="showcase"
            src={slide}
            className="size-full inline-block align-middle object-cover"
          />
        </div>
      ))}
    </ScrollXCarouselWrap>
    <ScrollXCarouselProgress
      className="bg-secondary mx-8 h-1 rounded-full overflow-hidden"
      progressStyle="size-full bg-secondary-foreground rounded-full"
    />
  </ScrollXCarouselContainer>
</ScrollXCarousel>