{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-02",
  "title": "Carousel with Multiple Slides",
  "description": "A carousel displaying multiple slides at once",
  "registryDependencies": [
    "carousel",
    "card"
  ],
  "files": [
    {
      "path": "src/components/customized/carousel/carousel-02.tsx",
      "content": "import {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/ui/carousel\";\n\nconst images = [\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-248.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-051.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-029.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-038.jpg\",\n  \"https://www.fffuel.co/images/dddepth-preview/dddepth-012.jpg\",\n];\n\nexport default function CarouselWithMultipleSlides() {\n  return (\n    <Carousel\n      className=\"w-full max-w-sm\"\n      opts={{\n        align: \"start\",\n      }}\n    >\n      <CarouselContent className=\"-ml-2\">\n        {images.map((image) => (\n          <CarouselItem className=\"pl-2 md:basis-1/2 lg:basis-1/3\" key={image}>\n            <div className=\"aspect-square p-1\">\n              <img\n                alt=\"dddepth-248\"\n                className=\"size-full rounded-xl object-cover\"\n                src={image}\n              />\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}