Vertical Thumbnail Slider

carousels

Ui-Layouts component.

responsive · 540px

Install

Same command in any shadcn project — React (Vite/CRA), Next.js, Remix, Astro, and more:

$npx shadcn@latest add https://your-domain/r/vertical-thumbnail-slider.json

Usage

import Cmp from "@/registry/ui-layouts/verticalthumbs-slider";

export default function Demo() {
  return <Cmp />;
}

Component source

'use client';
import {
  Carousel,
  Slider,
  SliderContainer,
  SliderDotButton,
  ThumbsSlider,
} from '@/registry/ui-layouts/carousel';
import type { EmblaOptionsType } from 'embla-carousel';
import React, { ReactNode } from 'react';

function VerticalthumbsSlider() {
  const OPTIONS: EmblaOptionsType = {
    loop: false,
    axis: 'y',
    direction: 'rtl',
  };
  return (
    <>
      <Carousel options={OPTIONS} className='relative flex gap-2'>
        <SliderContainer className='gap-2 h-[400px] w-full'>
          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1759395073808-17782f3d8d66?q=80&w=1471&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1759395073808-17782f3d8d66?q=80&w=1471&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>

          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1759434192768-fe3facebd5f6?q=80&w=1471&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1759434192768-fe3facebd5f6?q=80&w=1471&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>

          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1758641008040-28cdd59ca8fb?q=80&w=687&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1758641008040-28cdd59ca8fb?q=80&w=687&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>

          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1618220649687-ba860f3176e7?q=80&w=1474&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1618220649687-ba860f3176e7?q=80&w=1474&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>

          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1525310072745-f49212b5ac6d?q=80&w=765&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1525310072745-f49212b5ac6d?q=80&w=765&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>

          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1603338936206-9f7bd3c61cf0?q=80&w=730&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1603338936206-9f7bd3c61cf0?q=80&w=730&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>

          <Slider
            className='h-full w-full'
            thumbnailSrc='https://images.unsplash.com/photo-1580411788548-eee17fc98883?q=80&w=687&auto=format&fit=crop'
          >
            <img
              src='https://images.unsplash.com/photo-1580411788548-eee17fc98883?q=80&w=687&auto=format&fit=crop'
              alt='image'
              className='h-full object-cover rounded-lg w-full'
            />
          </Slider>
        </SliderContainer>
        <ThumbsSlider
          className='w-20'
          thumbsClassName='h-[400px]'
          thumbsSliderClassName='border-black'
        />
      </Carousel>
    </>
  );
}

export default VerticalthumbsSlider;

Dependencies

embla-carousellucide-reactembla-carousel-class-namesembla-carousel-reactembla-carousel-autoplaymotion

Source: Ui-Layouts