{
  "scopeId": "demo-carousel",
  "tailwindCss": ".demo-carousel .absolute{position:absolute}.demo-carousel .relative{position:relative}.demo-carousel .bottom-4{bottom:1rem}.demo-carousel .left-1\\/2{left:50%}.demo-carousel .left-4{left:1rem}.demo-carousel .right-4{right:1rem}.demo-carousel .top-1\\/2{top:50%}.demo-carousel .mb-2{margin-bottom:.5rem}.demo-carousel .flex{display:flex}.demo-carousel .h-3{height:.75rem}.demo-carousel .h-5{height:1.25rem}.demo-carousel .h-64{height:16rem}.demo-carousel .w-3{width:.75rem}.demo-carousel .w-5{width:1.25rem}.demo-carousel .w-full{width:100%}.demo-carousel .-translate-x-1\\/2{--tw-translate-x:-50%}.demo-carousel .-translate-x-1\\/2,.demo-carousel .-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))}.demo-carousel .-translate-y-1\\/2{--tw-translate-y:-50%}.demo-carousel .gap-2{gap:.5rem}.demo-carousel .overflow-hidden{overflow:hidden}.demo-carousel .rounded-full{border-radius:9999px}.demo-carousel .rounded-xl{border-radius:.75rem}.demo-carousel .bg-brand-600{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-brand-600) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.demo-carousel .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.demo-carousel .bg-white\\/50{background-color:hsla(0,0%,100%,.5)}.demo-carousel .bg-white\\/80{background-color:hsla(0,0%,100%,.8)}.demo-carousel .object-cover{-o-object-fit:cover;object-fit:cover}.demo-carousel .p-2{padding:.5rem}.demo-carousel .p-6{padding:1.5rem}.demo-carousel .text-xl{font-size:1.25rem;line-height:1.75rem}.demo-carousel .font-bold{font-weight:700}.demo-carousel .text-neutral-600{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-600) calc(var(--tw-text-opacity, 1)*100%),transparent)}.demo-carousel .text-neutral-900{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-text-opacity, 1)*100%),transparent)}.demo-carousel .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)}.demo-carousel .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=\"{ activeSlide: 0, slides: [\n  { image: 'https://placehold.co/800x400', title: 'Featured Product One', description: 'Discover our latest innovation in premium quality.' },\n  { image: 'https://placehold.co/800x400', title: 'Featured Product Two', description: 'Engineered for performance and built to last.' },\n  { image: 'https://placehold.co/800x400', title: 'Featured Product Three', description: 'Trusted by thousands of happy customers worldwide.' }\n]}\">\n  <div class=\"relative overflow-hidden rounded-xl\">\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-white\">\n          <h3 x-text=\"slide.title\" class=\"text-xl font-bold text-neutral-900 mb-2\"></h3>\n          <p x-text=\"slide.description\" class=\"text-neutral-600\"></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-brand-600' : '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": "Featured Product One",
        "description": "Discover our latest innovation in premium quality."
      },
      {
        "image": "https://placehold.co/800x400",
        "title": "Featured Product Two",
        "description": "Engineered for performance and built to last."
      },
      {
        "image": "https://placehold.co/800x400",
        "title": "Featured Product Three",
        "description": "Trusted by thousands of happy customers worldwide."
      }
    ],
    "activeSlide": 0
  }
}