{
  "scopeId": "carousel-demo",
  "tailwindCss": ".carousel-demo .absolute{position:absolute}.carousel-demo .relative{position:relative}.carousel-demo .bottom-4{bottom:1rem}.carousel-demo .left-1\\/2{left:50%}.carousel-demo .left-4{left:1rem}.carousel-demo .right-4{right:1rem}.carousel-demo .top-1\\/2{top:50%}.carousel-demo .mb-2{margin-bottom:.5rem}.carousel-demo .flex{display:flex}.carousel-demo .h-3{height:.75rem}.carousel-demo .h-5{height:1.25rem}.carousel-demo .h-64{height:16rem}.carousel-demo .w-3{width:.75rem}.carousel-demo .w-5{width:1.25rem}.carousel-demo .w-full{width:100%}.carousel-demo .-translate-x-1\\/2{--tw-translate-x:-50%}.carousel-demo .-translate-x-1\\/2,.carousel-demo .-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.carousel-demo .-translate-y-1\\/2{--tw-translate-y:-50%}.carousel-demo .gap-2{gap:.5rem}.carousel-demo .overflow-hidden{overflow:hidden}.carousel-demo .rounded-full{border-radius:9999px}.carousel-demo .rounded-lg{border-radius:.5rem}.carousel-demo .bg-base{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-50) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.carousel-demo .bg-primary{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-brand-600) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.carousel-demo .bg-white\\/50{background-color:hsla(0,0%,100%,.5)}.carousel-demo .bg-white\\/80{background-color:hsla(0,0%,100%,.8)}.carousel-demo .object-cover{-o-object-fit:cover;object-fit:cover}.carousel-demo .p-2{padding:.5rem}.carousel-demo .p-6{padding:1.5rem}.carousel-demo .text-xl{font-size:1.25rem;line-height:1.75rem}.carousel-demo .font-bold{font-weight:700}.carousel-demo .text-main{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-text-opacity, 1)*100%),transparent)}.carousel-demo .text-muted{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-600) calc(var(--tw-text-opacity, 1)*100%),transparent)}.carousel-demo .shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.carousel-demo .hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}",
  "dependencies": [],
  "version": "1.0",
  "configTemplate": "<div x-data=\"{ slides: [\n  { image: 'https://placehold.co/800x400', title: 'Slide One', description: 'Description for slide one' },\n  { image: 'https://placehold.co/800x400', title: 'Slide Two', description: 'Description for slide two' },\n  { image: 'https://placehold.co/800x400', title: 'Slide Three', description: 'Description for slide three' }\n], activeSlide: 0 }\">\n  <div class=\"relative overflow-hidden rounded-lg\">\n    <!-- Slides -->\n    <template x-for=\"(slide, index) in slides\" :key=\"index\">\n      <div x-show=\"activeSlide === index\" class=\"w-full\">\n        <img :src=\"slide.image\" :alt=\"slide.title\" class=\"w-full h-64 object-cover\">\n        <div class=\"p-6 bg-base\">\n          <h3 x-text=\"slide.title\" class=\"text-xl font-bold text-main mb-2\"></h3>\n          <p x-text=\"slide.description\" class=\"text-muted\"></p>\n        </div>\n      </div>\n    </template>\n\n    <!-- Navigation Arrows -->\n    <button @click=\"activeSlide = activeSlide === 0 ? slides.length - 1 : activeSlide - 1\"\n            class=\"absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow\">\n      <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/></svg>\n    </button>\n    <button @click=\"activeSlide = activeSlide === slides.length - 1 ? 0 : activeSlide + 1\"\n            class=\"absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow\">\n      <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>\n    </button>\n\n    <!-- Indicators -->\n    <div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2\">\n      <template x-for=\"(slide, index) in slides\" :key=\"'dot-' + index\">\n        <button @click=\"activeSlide = index\"\n                :class=\"activeSlide === index ? 'bg-primary' : 'bg-white/50'\"\n                class=\"w-3 h-3 rounded-full\">\n        </button>\n      </template>\n    </div>\n  </div>\n</div>",
  "configSchema": {
    "slides": {
      "type": "array",
      "label": "Slides",
      "itemLabel": "Slide",
      "itemSchema": {
        "image": {
          "type": "image",
          "label": "Image"
        },
        "title": {
          "type": "text",
          "label": "Title"
        },
        "description": {
          "type": "text",
          "label": "Description"
        }
      }
    },
    "activeSlide": {
      "type": "number",
      "label": "ActiveSlide"
    }
  },
  "initialConfigData": {
    "slides": [
      {
        "image": "https://placehold.co/800x400",
        "title": "Slide One",
        "description": "Description for slide one"
      },
      {
        "image": "https://placehold.co/800x400",
        "title": "Slide Two",
        "description": "Description for slide two"
      },
      {
        "image": "https://placehold.co/800x400",
        "title": "Slide Three",
        "description": "Description for slide three"
      }
    ],
    "activeSlide": 0
  }
}