Carousel

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}

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>
  )
}