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, marq

Infinite Slider

Example

Infinite Slider basic

Infinite Slider hover speed

Jungle Jack - JUNGLE DES ILLUSIONS VOL 2

Midnight Miami (feat Konvy) - Nino Paid, Konvy

Infinite Slider vertical

You can't tell me - People Make the World Go Round

Installation

npx shadcn@latest add "https://components.dylanwlim.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.
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.

In View Transition Panel

On This Page

Infinite Slider Example Infinite Slider basic Infinite Slider hover speed Infinite Slider vertical Installation Component API InfiniteSlider

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.