Infinite Image Carousel

Galleries 1

About

A high-performance infinite carousel with deep interaction handling: mathematically precise looping (even with 2 images), hover slowdown, drag with inertia, and a prop-based logo layout mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Infinite Image Carousel to your project and fits it to your theme.

Code

How Infinite Image Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {InfiniteImageCarousel} from "@/components/ui/infinite-image-carousel";

export default function Example() {
    return (
        <div className="h-screen w-full flex flex-col justify-around py-[10vh]">
            {/*logos*/}
            <InfiniteImageCarousel
                itemClass="lg:mr-8 lg:px-4 xl:[--width:12vw] md:[--width:150px] [--width:100px]"
                isLogo={true}
                direction={1}
                images={exampleLogos()}
            />

            {/*photos*/}
            <InfiniteImageCarousel
                itemClass="xl:[--width:15vw] lg:[--width:260px] [--width:120px]"
                images={examplePhotos()}/>
        </div>
    );
}

const examplePhotos = () => Array.from({length: 10}, (_, i) => ({
    url: `https://picsum.photos/400/400?random=${Math.random()}`,
    title: `Image ${i + 1}`
}));
const exampleLogos = () => {
    const brands = ['apple', 'google', 'microsoft', 'meta', 'netflix', 'spotify', 'samsung', 'intel', 'adobe'];
    const shuffled = brands.sort(() => Math.random() - 0.5);
    return shuffled.map((brand, i) => ({
        url: `https://cdn.svglogos.dev/logos/${brand}.svg`,
        title: brand.charAt(0).toUpperCase() + brand.slice(1)
    }));
};