Infinite Carousel

A looping carousel that continuously scrolls through slides or images, ideal for dynamic showcases or testimonials.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/InfiniteCarousel

Usage

import { InfiniteCarousel } from "@/components/display-ui/InfiniteCarousel"

<InfiniteCarousel pauseOnHover={true} speed={60}>
  {/* 1 */}
  <InfiniteCarouselItem
    href="https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.1.0"
    className="mx-4 h-64"
  >
    <img
      src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.1.0"
      alt=""
      className="w-64 h-64 object-cover rounded-lg"
    />
  </InfiniteCarouselItem>
 
  {/* 2 */}
  <InfiniteCarouselItem
    href="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0"
    className="mx-4 h-64"
  >
    <img
      src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0"
      alt=""
      className="w-64 h-64 object-cover rounded-lg"
    />
  </InfiniteCarouselItem>
</InfiniteCarousel>

API

Drawer Props

For InfiniteCarousel Component

Attribute	Type	Description	Default
children	`ReactNode[]`	Carousel items rendered in an infinite horizontal scrolling loop. Typically composed of InfiniteCarouselItem components.	-
speed	`number`	Scrolling speed of the carousel in pixels per second.	50
pauseOnHover	`boolean`	Pauses the carousel animation when the user hovers over it.	true
className	`string`	Additional CSS classes to customize the carousel container styling.	-

For InfiniteCarousel Item

Attribute	Type	Description	Default
children	`ReactNode`	Content displayed inside the infinite carousel item.	-
href	`string`	Optional navigation URL. When provided, clicking the item navigates to this link.	-
className	`string`	Additional CSS classes to customize the carousel item styling.	-

Examples

Without Pause

With Pause

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

On this page