# Slideshow Demo

> Demo showing how to use slideshow component.

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

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

## Install

```bash
npx shadcn@latest add https://systaliko-ui.vercel.app/r/slideshow-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/slideshow`

## Files

### `registry/demo/blocks/slideshow/index.tsx`

```tsx
'use client';
import {
  Slideshow,
  SlideshowImageContainer,
  SlideshowImageWrap,
  SlideshowIndicator,
} from '@/components/systaliko-ui/blocks/slideshow';
import Image from 'next/image';

const slides = [
  {
    id: 'slide-6',
    title: 'UI UX design',
    imageUrl:
      'https://images.unsplash.com/photo-1688733720228-4f7a18681c4f?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  },
  {
    id: 'slide-1',
    title: 'frontend dev',
    imageUrl:
      'https://images.unsplash.com/photo-1654618977232-a6c6dea9d1e8?q=80&w=2486&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  },
  {
    id: 'slide-2',
    title: 'backend dev',
    imageUrl:
      'https://images.unsplash.com/photo-1624996752380-8ec242e0f85d?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  },
  {
    id: 'slide-3',
    title: 'video editing',
    imageUrl:
      'https://images.unsplash.com/photo-1574717025058-2f8737d2e2b7?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  },
  {
    id: 'slide-4',
    title: 'SEO optimization',
    imageUrl:
      '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 SlideshowDemo() {
  return (
    <Slideshow className="min-h-svh place-content-center p-6 md:px-12">
      <h3 className="mb-6 text-primary text-xs font-medium capitalize tracking-wide">
        / our services
      </h3>
      <div className="flex flex-wrap items-center justify-evenly gap-6 md:gap-12">
        <div className="flex  flex-col space-y-2 md:space-y-4   ">
          {slides.map((slide, index) => (
            <SlideshowIndicator
              key={slide.title}
              index={index}
              className="cursor-pointer text-4xl font-bold uppercase tracking-tighter"
            >
              {slide.title}
            </SlideshowIndicator>
          ))}
        </div>
        <SlideshowImageContainer className="relative h-96 aspect-[9/14]">
          {slides.map((slide, index) => (
            <SlideshowImageWrap key={index} index={index} className="relative">
              <Image
                src={slide.imageUrl}
                alt={slide.title}
                fill
                priority={true}
                sizes="(max-width: 768px) 100vw, 50vw"
                className="size-full object-cover"
              />
            </SlideshowImageWrap>
          ))}
        </SlideshowImageContainer>
      </div>
    </Slideshow>
  );
}
```