{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-indicator-outside",
  "type": "registry:component",
  "title": "Carousel Indicator Outside",
  "description": "Carousel Indicator Outside",
  "files": [
    {
      "path": "registry/ui-basic/CarouselIndicatorOutside.tsx",
      "content": "import React, { useEffect } from \"react\";\r\n\r\nimport Glide from \"@glidejs/glide\";\r\n\r\nexport default function CarouselIndicatorsOutside() {\r\n\tuseEffect(() => {\r\n\t\tconst slider = new Glide(\".glide-05\", {\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 indicators outside --> */}\r\n\t\t\t<div className=\"glide-05 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{/*    <!-- Indicators --> */}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"flex w-full items-center justify-center gap-2\"\r\n\t\t\t\t\tdata-glide-el=\"controls[nav]\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tclassName=\"group p-4\"\r\n\t\t\t\t\t\tdata-glide-dir=\"=0\"\r\n\t\t\t\t\t\taria-label=\"goto slide 1\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span className=\"block h-2 w-2 rounded-full bg-white/20 ring-1 ring-slate-700 transition-colors duration-300 focus:outline-hidden\"></span>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tclassName=\"group p-4\"\r\n\t\t\t\t\t\tdata-glide-dir=\"=1\"\r\n\t\t\t\t\t\taria-label=\"goto slide 2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span className=\"block h-2 w-2 rounded-full bg-white/20 ring-1 ring-slate-700 transition-colors duration-300 focus:outline-hidden\"></span>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tclassName=\"group p-4\"\r\n\t\t\t\t\t\tdata-glide-dir=\"=2\"\r\n\t\t\t\t\t\taria-label=\"goto slide 3\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span className=\"block h-2 w-2 rounded-full bg-white/20 ring-1 ring-slate-700 transition-colors duration-300 focus:outline-hidden\"></span>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tclassName=\"group p-4\"\r\n\t\t\t\t\t\tdata-glide-dir=\"=3\"\r\n\t\t\t\t\t\taria-label=\"goto slide 4\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span className=\"block h-2 w-2 rounded-full bg-white/20 ring-1 ring-slate-700 transition-colors duration-300 focus:outline-hidden\"></span>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t{/*<!-- End Carousel with indicators outside --> */}\r\n\t\t</>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}