Feat: auto spin carousel every fife seconds

themes/quark-hugo/layouts/partials/modular/carousel.html

@@ -57,11 +57,40 @@
     {{ end }}
   </div>
   <!-- carousel navigation -->
-  <div class="carousel-nav">
+  <div class="carousel-nav" id="carousel-nav">
     {{$currentSlideIndex = 0}}
     {{ range .items }}
     <label class="nav-item text-hide c-hand" for="slide-{{ $currentSlideIndex }}">{{ $currentSlideIndex }}</label>
     {{ $currentSlideIndex = add $currentSlideIndex 1}}
     {{ end }}
   </div>
+  <!-- carousel controller -->
+  <script>
+    // Spin carousel after fife seconds
+    const carousel = document.querySelector('#carousel-nav');
+    const carouselItems = carousel.querySelectorAll('.nav-item');
+    const carouselLocators = document.querySelectorAll('.carousel-locator');
+    let carouselIndex = 1;
+
+    // find initial carouselIndex
+    for (let i = 0; i < carouselLocators.length; i++) {
+      if (carouselLocators[i].checked) {
+        carouselIndex = (i+1) % carouselLocators.length;
+        break;
+      }
+    }
+
+    const carouselInterval = setInterval(() => {
+      carouselLocators[carouselIndex].click();
+      carouselIndex = (carouselIndex+1) % carouselLocators.length;
+    }, 5000);
+
+    // stop carousel when clicked manually on any item
+    for(const item of carouselItems) {
+      item.addEventListener('click', () => {
+        clearInterval(carouselInterval);
+      });
+    }
+
+  </script>
 </div>