# scroll x carousel reversed Demo

> another Demo showing how to use scroll x carousel component in a reversed.

A shadcn/ui block from the [@systaliko-ui](https://systaliko-ui.vercel.app) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/systaliko-ui/scroll-x-carousel-reverse-demo).

- Page, with a live preview: https://shadcn.exchange/r/systaliko-ui/scroll-x-carousel-reverse-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/systaliko-ui/scroll-x-carousel-reverse-demo-light-df15a1bbe0b77107.png
- Registry item: https://systaliko-ui.vercel.app/r/scroll-x-carousel-reverse-demo.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-x-carousel-reverse-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://systaliko-ui.vercel.app/r/scroll-x-carousel`

## Files

### `registry/demo/scroll-animations/scroll-x-carousel-reverse/index.tsx`

```tsx
import {
  ScrollXCarousel,
  ScrollXCarouselContainer,
  ScrollXCarouselWrap,
} from '@/components/systaliko-ui/scroll-animations/scroll-x-carousel';

const SHOWCASE_IMAGES = [
  'https://images.unsplash.com/photo-1688733720228-4f7a18681c4f?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1624996752380-8ec242e0f85d?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1574717025058-2f8737d2e2b7?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1654618977232-a6c6dea9d1e8?q=80&w=2486&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1726066012698-bb7a3abce786?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
];

export function ScrollXCarouselReverseDemo() {
  return (
    <ScrollXCarousel>
      <ScrollXCarouselContainer className=" place-content-center flex flex-col gap-4">
        <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%', '-40%']}
          className="relative flex gap-4 [&>*:first-child]:ml-8"
        >
          {SHOWCASE_IMAGES.map((imageUrl, index) => (
            <div
              className="min-w-[50vw] md:min-w-[30vw] aspect-video rounded overflow-hidden"
              key={index}
            >
              <img
                alt="agency showcase"
                src={imageUrl}
                className="size-full object-cover"
              />
            </div>
          ))}
        </ScrollXCarouselWrap>
        <ScrollXCarouselWrap
          xRagnge={['-50%', '10%']}
          className="relative flex gap-4 [&>*:first-child]:ml-8"
        >
          {SHOWCASE_IMAGES.map((imageUrl, index) => (
            <div
              className="min-w-[50vw] md:min-w-[30vw] aspect-video rounded overflow-hidden"
              key={index}
            >
              <img
                alt="agency showcase"
                src={imageUrl}
                className="size-full object-cover"
              />
            </div>
          ))}
        </ScrollXCarouselWrap>
      </ScrollXCarouselContainer>
    </ScrollXCarousel>
  );
}
```