dropdown

superpage/src/components/Carousel.astro

@@ -4,9 +4,9 @@ import { Icon } from "astro-icon/components";
 const { items = [] } = Astro.props;
 ---
 
-<div id="carousel" class="relative">
+<div data-ride="carousel" class="relative">
     <button
-        id="prev"
+        data-toggle="prev"
         class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
         aria-label="Anterior"
     >
@@ -14,7 +14,7 @@ const { items = [] } = Astro.props;
     </button>
 
     <button
-        id="next"
+        data-toggle="next"
         class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
         aria-label="Próximo"
     >
@@ -38,11 +38,15 @@ const { items = [] } = Astro.props;
 </div>
 
 <script>
-    const carousel = document.getElementById("carousel");
-    const slides = carousel.querySelectorAll(".snap-center");
+    const carousel = document.querySelector("[data-ride=carousel]");
+    const slides = carousel?.querySelectorAll(".snap-center");
     let currentIndex = 0;
 
     const scrollToSlide = (index: number) => {
+        if (!slides) {
+            return;
+        }
+
         if (index >= 0 && index < slides.length) {
             slides[index].scrollIntoView({
                 behavior: "smooth",
@@ -53,11 +57,15 @@ const { items = [] } = Astro.props;
         }
     };
 
-    document.getElementById("prev").addEventListener("click", () => {
-        scrollToSlide(currentIndex - 1);
-    });
+    carousel
+        ?.querySelector("[data-toggle=prev]")
+        ?.addEventListener("click", () => {
+            scrollToSlide(currentIndex - 1);
+        });
 
-    document.getElementById("next").addEventListener("click", () => {
-        scrollToSlide(currentIndex + 1);
-    });
+    carousel
+        ?.querySelector("[data-toggle=next]")
+        ?.addEventListener("click", () => {
+            scrollToSlide(currentIndex + 1);
+        });
 </script>