{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-controls-outside",
  "type": "registry:component",
  "title": "Carousel Controls Outside",
  "description": "Carousel Controls Outside",
  "files": [
    {
      "path": "registry/ui-basic/CarouselControlsOutside.tsx",
      "content": "import React, { useEffect } from \"react\";\n\nimport Glide from \"@glidejs/glide\";\n\nexport default function CarouselControlsOutside() {\n\tuseEffect(() => {\n\t\tconst slider = new Glide(\".glide-04\", {\n\t\t\ttype: \"carousel\",\n\t\t\tfocusAt: \"center\",\n\t\t\tperView: 3,\n\t\t\tautoplay: 3500,\n\t\t\tanimationDuration: 700,\n\t\t\tgap: 24,\n\t\t\tclassNames: {\n\t\t\t\tnav: {\n\t\t\t\t\tactive: \"[&>*]:bg-wuiSlate-700\",\n\t\t\t\t},\n\t\t\t},\n\t\t\tbreakpoints: {\n\t\t\t\t1024: {\n\t\t\t\t\tperView: 2,\n\t\t\t\t},\n\t\t\t\t640: {\n\t\t\t\t\tperView: 1,\n\t\t\t\t},\n\t\t\t},\n\t\t}).mount();\n\n\t\treturn () => {\n\t\t\tslider.destroy();\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t{/*<!-- Component: Carousel with controls outside --> */}\n\t\t\t<div className=\"glide-04 relative w-full\">\n\t\t\t\t{/*    <!-- Slides --> */}\n\t\t\t\t<div className=\"overflow-hidden\" data-glide-el=\"track\">\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\">\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"m-auto max-h-full w-full max-w-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t{/*    <!-- Controls --> */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"flex w-full items-center justify-center gap-2 p-4\"\n\t\t\t\t\tdata-glide-el=\"controls\"\n\t\t\t\t>\n\t\t\t\t\t<button\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\"\n\t\t\t\t\t\tdata-glide-dir=\"<\"\n\t\t\t\t\t\taria-label=\"prev slide\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title>prev slide</title>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\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\"\n\t\t\t\t\t\tdata-glide-dir=\">\"\n\t\t\t\t\t\taria-label=\"next slide\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title>next slide</title>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{/*<!-- End Carousel with controls outside --> */}\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}