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
Deep focus42 tracks
Morning run28 tracks
Rainy commute35 tracks
Sunday kitchen19 tracks
Late night drive31 tracks
Study hall54 tracks
Deep focus42 tracks
Morning run28 tracks
Rainy commute35 tracks
Sunday kitchen19 tracks
Late night drive31 tracks
Study hall54 tracks
Garden hours23 tracks
Long flight61 tracks
Coffee shop37 tracks
Warm up16 tracks
Wind down26 tracks
Road trip48 tracks
Garden hours23 tracks
Long flight61 tracks
Coffee shop37 tracks
Warm up16 tracks
Wind down26 tracks
Road trip48 tracks
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-infinite-slider.jsonComponent 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. |
| speed | number | 100 | The speed of the slider animation in pixels per second. |
| speedOnHover | number | The speed of the slider animation when hovered, in pixels per second. | |
| 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. |