Loading...
import { Carousel } from "@/registry/aliimam/components/carousel"
export function DemoOne() {
const slides = [
<div
key={"4"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-06-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"1"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-02-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"2"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-03-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"3"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-04-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"5"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-05-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
]
return (
<div className="mx-auto flex h-full w-full items-center justify-center">
<Carousel slides={slides} />
</div>
)
}
Loading...
import { Carousel } from "@/registry/aliimam/components/carousel"
export function DemoOne() {
const slides = [
<div
key={"4"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-07-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"1"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-08-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"2"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-09-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"3"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-10-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
<div
key={"5"}
className="bg-card text-card-foreground relative h-full w-full overflow-hidden rounded-md border"
>
<div className="h-full w-full overflow-hidden">
<img
src="/r/hero-11-light.png"
className="h-full w-full object-cover"
/>
</div>
</div>,
]
return (
<div className="mx-auto flex h-full w-full items-center justify-center">
<Carousel
slides={slides}
showArrows
showDots={false}
showCounter
showProgress={false}
/>
</div>
)
}
Loading...
import { Carousel } from "@/registry/aliimam/components/carousel"
export function DemoOne() {
const images = [
{
src: "/r/hero-02-light.png",
alt: "Icons",
},
{
src: "/r/hero-03-light.png",
alt: "Icons",
},
{
src: "/r/hero-04-light.png",
alt: "Icons",
},
{
src: "/r/hero-05-light.png",
alt: "Icons",
},
{
src: "/r/hero-06-light.png",
alt: "Icons",
},
]
const slides = images.map((img) => (
<img
key={img.src}
src={img.src}
className="h-full w-full rounded-xl"
alt={img.alt}
/>
))
const thumbnails = images.map((img) => (
<img key={img.src} src={img.src} className="h-full w-full" alt={img.alt} />
))
return (
<div className="mx-auto flex h-full w-full max-w-2xl items-center justify-center">
<Carousel
slides={slides}
thumbnails={thumbnails}
thumbPosition="left"
showDots={false}
showPlay={false}
showProgress={false}
/>
</div>
)
}
Loading...
import { Carousel } from "@/registry/aliimam/components/carousel"
export function DemoOne() {
const images = [
{
src: "/r/hero-02-light.png",
alt: "Icons",
},
{
src: "/r/hero-03-light.png",
alt: "Icons",
},
{
src: "/r/hero-04-light.png",
alt: "Icons",
},
{
src: "/r/hero-05-light.png",
alt: "Icons",
},
{
src: "/r/hero-06-light.png",
alt: "Icons",
},
]
const slides = images.map((img) => (
<img
key={img.src}
src={img.src}
className="h-64 w-full rounded-xl object-cover"
alt={img.alt}
/>
))
const thumbnails = images.map((img) => (
<img
key={img.src}
src={img.src}
className="h-full w-full object-cover"
alt={img.alt}
/>
))
return (
<div className="mx-auto flex h-full w-full max-w-2xl items-center justify-center">
<Carousel
slides={slides}
thumbnails={thumbnails}
autoplayDelay={2500}
showPlay={false}
showDots={false}
showProgress
/>
</div>
)
}
Loading...
import { Carousel } from "@/registry/aliimam/components/carousel"
export function DemoOne() {
const images = [
{
src: "/r/hero-02-light.png",
alt: "Icons",
caption: "Icons",
},
{
src: "/r/hero-03-light.png",
alt: "Icons",
caption: "Icons",
},
{
src: "/r/hero-04-light.png",
alt: "Icons",
caption: "Icons",
},
{
src: "/r/hero-05-light.png",
alt: "Icons",
caption: "Icons",
},
{
src: "/r/hero-06-light.png",
alt: "Icons",
caption: "Icons",
},
]
const slides = images.map((img) => (
<img
key={img.src}
src={img.src}
className="h-64 w-full rounded-xl object-cover"
alt={img.alt}
/>
))
const thumbnails = images.map((img) => (
<img
key={img.src}
src={img.src}
className="h-full w-full object-cover"
alt={img.alt}
/>
))
const captions = images.map((img) => img.caption)
return (
<div className="mx-auto w-full max-w-xl">
<Carousel
slides={slides}
thumbnails={thumbnails}
thumbPosition="bottom"
captions={captions}
showArrows
showDots
showCounter
showProgress
keyboardNavigation
lightbox
autoplayDelay={4000}
/>
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://aliimam.in/r/carousel.json
Usage
import { Carousel } from "@/components/ui/carousel"<Carousel
slides={[<img src="/1.jpg" />, <img src="/2.jpg" />]}
/>Props
| Prop | Type | Default |
|---|---|---|
| slides | React.ReactNode[] | — |
| options | EmblaOptionsType | — |
| thumbnails | React.ReactNode[] | — |
| thumbPosition | "bottom" | "left" | "right" | "bottom" |
| showArrows | boolean | false |
| showProgress | boolean | true |
| showDots | boolean | true |
| showCounter | boolean | false |
| showPlay | boolean | true |
| keyboardNavigation | boolean | false |
| lightbox | boolean | false |
| transition | "slide" | "fade" | "slide" |
| autoplayDelay | number | 3000 |
| captions | string[] | — |
savd











