Infinite Slider

An infinite scrolling slider that smoothly loops through its children. Inspired by Motion Primitives’ Infinite Slider . Supports horizontal and vertical directions with customizable speed.

Installation

npx shadcn@latest add https://prismaui.com/components/infinite-slider.json

Import


import { InfiniteSlider } from '@/components/ui/infinite-slider';

Preview


<InfiniteSlider gap={24} speed={80}>
  <Image
    src='https://picsum.photos/120/80'
    alt='Slide 1'
    width={120}
    height={80}
    className='h-20 w-30 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/122/82'
    alt='Slide 2'
    width={122}
    height={82}
    className='h-20 w-30 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/124/80'
    alt='Slide 3'
    width={124}
    height={80}
    className='h-20 w-30 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/120/84'
    alt='Slide 4'
    width={120}
    height={84}
    className='h-20 w-30 rounded-lg object-cover'
  />
</InfiniteSlider>

Reverse Direction


<InfiniteSlider reverse>
  <Image
    src='https://picsum.photos/120/80'
    alt='Slide 1'
    width={120}
    height={80}
    className='h-20 w-30 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/122/82'
    alt='Slide 2'
    width={122}
    height={82}
    className='h-20 w-30 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/124/80'
    alt='Slide 3'
    width={124}
    height={80}
    className='h-20 w-30 rounded-lg object-cover'
  />
</InfiniteSlider>

Speed on Hover


<InfiniteSlider speed={100} speedOnHover={30}>
  <Image
    src='https://picsum.photos/120/80'
    alt='Slide 1'
    width={120}
    height={80}
    className='h-20 w-30 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/122/82'
    alt='Slide 2'
    width={122}
    height={82}
    className='h-20 w-30 rounded-lg object-cover'
  />
</InfiniteSlider>

Vertical


<InfiniteSlider direction='vertical' className='h-64'>
  <Image
    src='https://picsum.photos/80/120'
    alt='Slide 1'
    width={80}
    height={120}
    className='h-20 w-40 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/82/122'
    alt='Slide 2'
    width={82}
    height={122}
    className='h-20 w-40 rounded-lg object-cover'
  />
  <Image
    src='https://picsum.photos/80/124'
    alt='Slide 3'
    width={80}
    height={124}
    className='h-20 w-40 rounded-lg object-cover'
  />
</InfiniteSlider>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Slider content.
`gap`	`number`	`16`	Gap between items in pixels.
`speed`	`number`	`100`	Speed in pixels per second.
`speedOnHover`	`number`	—	Speed when hovered.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll direction.
`reverse`	`boolean`	`false`	Reverse direction.
`className`	`string`	—	Additional CSS classes.