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 motion-primitives@latest add infinite-slider
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. |
| 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. |