18Switch language to العربية

Infinite Slider

PreviousNext

Infinite auto-scrolling slider with smooth animations.

import { InfiniteSlider } from "@/components/atom/infinite-slider"

export default function InfiniteSliderDemo() {
  return (
    <>
      <InfiniteSlider>
        <div className="flex gap-4">
          <div className="h-20 w-32 rounded bg-muted flex items-center justify-center">
            1
          </div>
          <div className="h-20 w-32 rounded bg-muted flex items-center justify-center">
            2
          </div>
          <div className="h-20 w-32 rounded bg-muted flex items-center justify-center">
            3
          </div>
          <div className="h-20 w-32 rounded bg-muted flex items-center justify-center">
            4
          </div>
        </div>
      </InfiniteSlider>
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/infinite-slider

Usage

import { InfiniteSlider } from "@/components/atom/infinite-slider"
<InfiniteSlider>
  <div className="flex gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</InfiniteSlider>