{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-carousel-4","type":"registry:block","title":"Carousel with responsive basis","description":"Carousel with responsive basis","dependencies":[],"registryDependencies":["card","carousel"],"files":[{"path":"c-carousel-4.tsx","type":"registry:block","content":"import { Card } from \"@/components/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport function Pattern() {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-3xl\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 8 }).map((_, index) => (\n          <CarouselItem\n            key={index}\n            className=\"sm:basis-1/2 md:basis-1/3 lg:basis-1/4\"\n          >\n            <div className=\"p-1\">\n              <Card className=\"relative aspect-3/4 overflow-hidden border-0 p-0\">\n                <img\n                  src={`https://picsum.photos/600/800?grayscale&random=${index + 15}`}\n                  alt={`Slide ${index + 1}`}\n                  width={600}\n                  height={800}\n                  className=\"h-full w-full object-cover\"\n                />\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"hidden sm:inline-flex\" />\n      <CarouselNext className=\"hidden sm:inline-flex\" />\n    </Carousel>\n  )\n}","target":"components/examples/c-carousel-4.tsx"}],"meta":{"order":4,"gridSize":1}}