Autoscroll Slider

carousels

Ui-Layouts component.

responsive · 500px

Install

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

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

Usage

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

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

Component source

'use client';
import { Carousel, Slider, SliderContainer, SliderDotButton } from '@/registry/ui-layouts/carousel';
import type { EmblaOptionsType } from 'embla-carousel';
import AutoScroll from 'embla-carousel-auto-scroll';

function AutoScrollSlider() {
  const OPTIONS: EmblaOptionsType = { loop: true };
  return (
    <>
      <Carousel
        options={OPTIONS}
        plugins={[
          AutoScroll({
            speed: 2,
            stopOnInteraction: false,
            stopOnMouseEnter: true,
            startDelay: 100,
          }),
        ]}
        className='w-4/5 mx-auto'
      >
        <SliderContainer className='gap-2 h-[400px] md:text-3xl text-md'>
          <Slider className='w-[40%] bg-red-500 uppercase rounded-xl h-full grid place-items-center'>
            <p>Slide 1</p>
          </Slider>
          <Slider className='w-[80%] bg-blue-500 uppercase rounded-xl h-full grid place-items-center'>
            <p>Slide 2</p>
          </Slider>
          <Slider className='w-[40%] bg-green-500 uppercase rounded-xl h-full grid place-items-center'>
            <p>Slide 3</p>
          </Slider>
          <Slider className='w-[80%] mr-2 bg-yellow-500 uppercase rounded-xl h-full grid place-items-center'>
            <p>Slide 4</p>
          </Slider>
        </SliderContainer>
      </Carousel>
    </>
  );
}

export default AutoScrollSlider;

Dependencies

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

Source: Ui-Layouts