{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-controls-inside",
  "type": "registry:component",
  "title": "Carousel Controls Inside",
  "description": "Carousel Controls Inside",
  "files": [
    {
      "path": "registry/ui-basic/CarouselControlsInside.tsx",
      "content": "import React, { useEffect } from \"react\";\r\n\r\nimport Glide from \"@glidejs/glide\";\r\n\r\nexport default function CarouselControlsInside() {\r\n\tuseEffect(() => {\r\n\t\tconst slider = new Glide(\".glide-01\", {\r\n\t\t\ttype: \"carousel\",\r\n\t\t\tfocusAt: \"center\",\r\n\t\t\tperView: 3,\r\n\t\t\tautoplay: 3000,\r\n\t\t\tanimationDuration: 700,\r\n\t\t\tgap: 24,\r\n\t\t\tclassNames: {\r\n\t\t\t\tnav: {\r\n\t\t\t\t\tactive: \"[&>*]:bg-wuiSlate-700\",\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\tbreakpoints: {\r\n\t\t\t\t1024: {\r\n\t\t\t\t\tperView: 2,\r\n\t\t\t\t},\r\n\t\t\t\t640: {\r\n\t\t\t\t\tperView: 1,\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t}).mount();\r\n\r\n\t\treturn () => {\r\n\t\t\tslider.destroy();\r\n\t\t};\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{/*<!-- Component: Carousel with controls inside --> */}\r\n\t\t\t<div className=\"glide-01 relative w-full\">\r\n\t\t\t\t{/*    <!-- Slides --> */}\r\n\t\t\t\t<div className=\"overflow-hidden\" data-glide-el=\"track\">\r\n\t\t\t\t\t<ul className=\"whitespace-no-wrap flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform] relative flex w-full overflow-hidden p-0\">\r\n\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t</div>\r\n\t\t\t\t{/*    <!-- Controls --> */}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"absolute left-0 top-1/2 flex h-0 w-full items-center justify-between px-4 \"\r\n\t\t\t\t\tdata-glide-el=\"controls\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tclassName=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-700 bg-white/20 text-slate-700 transition duration-300 hover:border-slate-900 hover:text-slate-900 focus-visible:outline-hidden lg:h-12 lg:w-12\"\r\n\t\t\t\t\t\tdata-glide-dir=\"<\"\r\n\t\t\t\t\t\taria-label=\"prev slide\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\r\n\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<title>prev slide</title>\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\td=\"M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tclassName=\"inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-700 bg-white/20 text-slate-700 transition duration-300 hover:border-slate-900 hover:text-slate-900 focus-visible:outline-hidden lg:h-12 lg:w-12\"\r\n\t\t\t\t\t\tdata-glide-dir=\">\"\r\n\t\t\t\t\t\taria-label=\"next slide\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\r\n\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<title>next slide</title>\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\td=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t{/*<!-- End Carousel with controls inside --> */}\r\n\t\t</>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}