Components
/Infinite Slider/
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.
Install
npx shadcn@latest add https://21st.dev/r/ibelick/infinite-sliderStarting preview...
import { InfiniteSlider } from "@/components/ui/infinite-slider";
function InfiniteSliderBasic() {
return (
<InfiniteSlider gap={24} reverse className="w-full h-full bg-white">
<img
src="https://motion-primitives.com/apple_music_logo.svg"
alt="Apple Music logo"
className="h-[120px] w-auto"
/>
<img
src="https://motion-primitives.com/chrome_logo.svg"
alt="Chrome logo"
className="h-[120px] w-auto"
/>
<img
src="https://motion-primitives.com/strava_logo.svg"
alt="Strava logo"
className="h-[120px] w-auto"
/>
<img
src="https://motion-primitives.com/nintendo_logo.svg"
alt="Nintendo logo"
className="h-[120px] w-auto"
/>
<img
src="https://motion-primitives.com/jquery_logo.svg"
alt="Jquery logo"
className="h-[120px] w-auto"
/>
<img
src="https://motion-primitives.com/prada_logo.svg"
alt="Prada logo"
className="h-[120px] w-auto"
/>
</InfiniteSlider>
);
}
export default {
InfiniteSliderBasic
};
