Scroll X Carousel

Galleries 85

About

- Carousel transforms on x direction according to current scroll position.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll X Carousel to your project and fits it to your theme.

Code

How Scroll X Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollXCarousel,
  ScrollXCarouselContainer,
  ScrollXCarouselProgress,
  ScrollXCarouselWrap } from "@/components/ui/scroll-x-carousel";

const IMAGES = [
  'https://cdn.21st.dev/assets/mirror/e5/e53e3c7473052546682df15ee99f20ccf6b5413039fc6cafa1b23717237091d0.jpg',
  'https://cdn.21st.dev/assets/mirror/93/9309cec6a1caedbe56f26432bc56830785f7f06089f66190cfebcbe65e92789b.jpg',
  'https://cdn.21st.dev/assets/mirror/48/4875e9daf51a4045c9f1e1f3e58885d32b7f28e04a5c1471c86c135f0b1c8cd2.jpg',
  'https://cdn.21st.dev/assets/mirror/8c/8c0f960426250d158fbd13dcb4c244268f0847b8b3f2ae7788a62b9bcf6b7b02.jpg',
  'https://cdn.21st.dev/assets/mirror/64/64d1fa5c32ed1dc0c2ee577155618270fdff26e47f63c2fb4bc68c127d66d669.jpg',
];

export default function ReversedDemo() {
    return (
         <ScrollXCarousel className="h-[110vh]">
        <ScrollXCarouselContainer className="h-screen relative place-content-center flex flex-col space-y-4 py-12">
          <div className=" pointer-events-none w-[12vw] h-[103%] absolute inset-[0_auto_0_0] z-10 bg-[linear-gradient(90deg,_var(--background)_35%,_transparent)]" />
          <div className="pointer-events-none bg-[linear-gradient(270deg,_var(--background)_35%,_transparent)] w-[15vw] h-[103%] absolute inset-[0_0_0_auto] z-10" />
          <ScrollXCarouselWrap
            xRagnge={['5%', '-60%']}
            className="relative flex space-x-4 [&>*:first-child]:ml-8"
          >
            {IMAGES.map((imageUrl, index) => (
              <div
                className="min-w-[42vw] aspect-video  overflow-hidden"
                key={index}
              >
                <img
                  alt="agency showcase"
                  src={imageUrl}
                  className="size-full object-cover"
                />
              </div>
            ))}
          </ScrollXCarouselWrap>
          <ScrollXCarouselWrap
            xRagnge={['-70%', '0%']}
            className="relative flex space-x-4 [&>*:first-child]:ml-8"
          >
            {IMAGES.reverse().map((imageUrl, index) => (
              <div
                className="min-w-[42vw] aspect-video overflow-hidden"
                key={index}
              >
                <img
                  alt="agency showcase"
                  src={imageUrl}
                  className="size-full object-cover"
                />
              </div>
            ))}
          </ScrollXCarouselWrap>
        </ScrollXCarouselContainer>
      </ScrollXCarousel>
    )
}