{"version":3,"file":"home_carousel-8df81d8c.js","sources":["../../../app/javascript/components/carousel-vue3/HomeCarousel.vue","../../../app/javascript/entrypoints/home_carousel.js"],"sourcesContent":["<template>\n    <div class=\"carousel\">\n        <div class=\"carousel-images\">\n            <img\n                v-for=\"(image, index) in images\"\n                :key=\"index\"\n                :src=\"image\"\n                :class=\"{'active': index === currentIndex}\"\n                alt=\"Carousel Image\"\n            />\n        </div>\n        <div class=\"carousel-indicators\">\n          <span\n              v-for=\"(image, index) in images\"\n              :key=\"index\"\n              :class=\"{'active': index === currentIndex}\"\n              @click=\"goToSlide(index)\"\n          ></span>\n        </div>\n    </div>\n</template>\n\n<script>\nexport default {\n    props:{\n        images: Array,\n    },\n    data() {\n        return {\n            currentIndex: 0,\n        };\n    },\n    methods: {\n        goToSlide(index) {\n            this.currentIndex = index;\n        },\n    },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.carousel {\n    position: relative;\n    width: 100%;\n    margin: 0 auto;\n}\n\n.carousel-images {\n    position: relative;\n    overflow: hidden;\n}\n\n.carousel-images img {\n    width: 100%;\n    height: auto;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    transition: opacity 0.5s ease-in-out; /* Transición suave */\n}\n\n.carousel-images img.active {\n    opacity: 1;\n    position: relative; /* La imagen activa será visible */\n}\n\n.carousel-indicators {\n    display: flex;\n    justify-content: center;\n    margin-top: 20px;\n    position: relative;\n\n    span {\n        width: 16px !important;\n        height: 16px !important;\n        background-color: white !important;\n        border: 1px solid #0090CB;\n\n    }\n\n    .active {\n        background-color: #2E7326 !important;\n        border: 1px solid #2E7326;\n    }\n}\n\n.carousel-indicators span {\n    display: inline-block;\n    width: 10px;\n    height: 10px;\n    margin: 0 5px;\n    background-color: #ddd;\n    border-radius: 50%;\n    cursor: pointer;\n}\n\n.carousel-indicators .active {\n    background-color: #333;\n}\n</style>","import App from '@components/carousel-vue3/HomeCarousel.vue'\nimport { generateApplication } from '@helpers/generate_component.js';\n\nconst props = {\n    images: images\n}\ngenerateApplication(App, \"#carousel-app\", [], props)"],"names":["_sfc_main","index","_hoisted_1","_hoisted_2","_hoisted_4","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","$props","image","_normalizeClass","$data","$event","$options","props","generateApplication","App"],"mappings":"sGAuBA,MAAKA,EAAU,CACX,MAAM,CACF,OAAQ,KACX,EACD,MAAO,CACH,MAAO,CACH,aAAc,EAErB,EACD,QAAS,CACL,UAAUC,EAAO,CACb,KAAK,aAAeA,CACvB,CACJ,CACL,EApCSC,EAAA,CAAA,MAAM,UAAU,EACZC,EAAA,CAAA,MAAM,iBAAiB,YASvBC,EAAA,CAAA,MAAM,qBAAqB,wCAVpC,OAAAC,EAAA,EAAAC,EAkBM,MAlBNJ,EAkBM,CAjBFK,EAQM,MARNJ,EAQM,EAPFE,EAAA,EAAA,EAAAC,EAMEE,EAL2B,KAAAC,EAAAC,EAAA,OAAjB,CAAAC,EAAOV,SADnBK,EAME,MAAA,CAJG,IAAKL,EACL,IAAKU,EACL,MAAKC,EAAA,CAAA,OAAaX,IAAUY,EAAY,YAAA,CAAA,EACzC,IAAI,uCAGZN,EAOM,MAPNH,EAOM,EANJC,EAAA,EAAA,EAAAC,EAKQE,EAJqB,KAAAC,EAAAC,EAAA,OAAjB,CAAAC,EAAOV,SADnBK,EAKQ,OAAA,CAHH,IAAKL,EACL,MAAKW,EAAA,CAAA,OAAaX,IAAUY,EAAY,YAAA,CAAA,EACxC,QAAKC,GAAEC,EAAS,UAACd,CAAK,sFCb/Be,EAAQ,CACV,MACJ,EACAC,EAAoBC,EAAK,gBAAiB,CAAA,EAAIF,CAAK"}