Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
Example
Infinite Slider basic
Infinite Slider hover speed
Infinite Slider vertical
Installation
npx shadcn add "https://motion-primitives.com/c/infinite-slider.json"Component API
InfiniteSlider
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The child elements to be displayed in the slider. | |
| gap | number | 16 | The gap between child elements in pixels. |
| duration | number | 25 | The duration of a full cycle of the slider animation in seconds. |
| durationOnHover | number | The duration of the animation when hovered, in seconds. | |
| direction | 'horizontal' | 'vertical' | 'horizontal' | The direction of the slider movement. |
| reverse | boolean | false | Whether to reverse the direction of the slider movement. |
| className | string | undefined | Optional CSS class for styling the component. |