Mokri

Preview

<> import.ts

import { ImageCarousel } from "@/components/ui/image-carousel"

<> component.tsx

import { ImageCarousel } from "@/components/ui/image-carousel"

<ImageCarousel />

A slick-powered image carousel with pagination, arrows, and autoplay.

<> import.ts

import { ImageCarousel } from "@/components/ui/image-carousel"

Prop	Type	Default	Description
`data`	`Array<{ id: number \| string; title: string; subtitle: string; image: string }>`	—	Slides to render
`itemsPerView`	`number`	`3`	Slides visible at once (responsive caps apply)
`showPagination`	`boolean`	`true`	Show dot indicators
`autoPlay`	`boolean`	`false`	Enable autoplay
`autoPlaySpeed`	`number`	`3000`	Autoplay interval in ms
`showArrows`	`boolean`	`true`	Show previous/next arrows
`arrowsInside`	`boolean`	`false`	Place arrows inside the slide area

<> example.tsx

// Basic
<ImageCarousel />

<> example.tsx

// Two per view, autoplay
<ImageCarousel itemsPerView={2} autoPlay autoPlaySpeed={4000} />