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>
)
}
Part of Systaliko UI — browse the full library on 21st.dev.