Getting Started
Templates
Components
A sophisticated carousel component featuring 3D perspective effects, a draggable scrubber for quick navigation, and smooth spring animations. Designed for showcasing images with depth and visual impact.
Key Features:
import { ModelsCarousel } from "@/components/ui/models-carousel"
const images = [
{ src: "/model-1.jpg", alt: "Model wearing spring collection" },
{ src: "/model-2.jpg", alt: "Summer lookbook shot" },
{ src: "/model-3.jpg", alt: "Fall fashion editorial" },
]
export default function Example() {
return (
<ModelsCarousel
images={images}
autoPlay={true}
intervalMs={4000}
pauseOnHover={true}
onSlideChange={(index, image) => console.log("Active:", image.alt)}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
images | CarouselImage[] | required | Array of images to display |
autoPlay | boolean | true | Enable automatic slide advancement |
intervalMs | number | 4000 | Autoplay interval in milliseconds |
initialIndex | number | Middle image | Starting slide index |
loop | boolean | true | Enable infinite looping |
pauseOnHover | boolean | false | Pause autoplay when hovering |
onSlideChange | (index: number, image: CarouselImage) => void | undefined | Callback when active slide changes |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
src | string | Image source URL |
alt | string | Alt text for the image |
The carousel supports multiple ways to navigate:
The active slide is displayed at full scale and opacity, while adjacent slides receive:
This creates a natural depth-of-field effect that draws attention to the center item.
region, slider, group)