feat(carousel): javascript addon to manage slides navigation

assets/scripts/carousel.js

@@ -12,16 +12,20 @@ function isElementInViewport (el) {
 
 // little addon to enhance the carousel
 
+var carousels = document.querySelectorAll('.carousel');
 
-Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
+// first addon to change "enabled" slide indicator (way to complicated)
+Array.from(carousels).forEach((carousel) => {
     let viewport = carousel.getElementsByClassName("carousel__viewport")[0];
     let slides = carousel.getElementsByClassName("carousel__slide");
     let nav_items = Array.from(carousel.getElementsByClassName("carousel__navigation-item"))
     let last_scroll_pos = null;
 
     viewport.onscroll = (_event) => {
-        let position =  slides.length * viewport.scrollLeft / viewport.scrollWidth;
+        let position =  Math.ceil(slides.length * viewport.scrollLeft / viewport.scrollWidth);
         let direction = last_scroll_pos == null || last_scroll_pos < viewport.scrollLeft;
+        console.log("direction", direction);
+        console.log("position", position);
         last_scroll_pos = viewport.scrollLeft;
 
         nav_items.forEach((item, index) => {
@@ -41,3 +45,52 @@ Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
     }
 })
 
+
+// second addon to replace the anchor with javascript managed jump scroll
+
+// Iterate through each 'carousel__viewport' element
+carousels.forEach(function(carousel) {
+    var viewport = carousel.querySelector('.carousel__viewport')
+
+    // Get all elements with the class 'carousel__slide' within the current 'carousel__viewport'
+    var slides = viewport.querySelectorAll('.carousel__slide');
+
+    var prevButtons = viewport.querySelectorAll('.carousel__prev');
+    var nextButtons = viewport.querySelectorAll('.carousel__next');
+    var navigationButtons = carousel.querySelectorAll('.carousel__navigation-button');
+    console.log(prevButtons)
+    console.log(navigationButtons)
+
+    prevButtons.forEach(function(prevButton, index) {
+        // remove href, for css only carousel
+        prevButton.removeAttribute('href');
+        prevButton.addEventListener('click', function() {
+            console.log("Click of previous", index)
+
+            if (index == 0) {
+                viewport.scrollLeft = slides.length * slides[0].offsetWidth;
+                return;
+            }
+            viewport.scrollLeft -= slides[0].offsetWidth;
+        });
+    });
+
+    nextButtons.forEach(function(nextButton, index) {
+        nextButton.removeAttribute('href');
+        nextButton.addEventListener('click', function() {
+            if (index == slides.length-1) {
+                viewport.scrollLeft = 0;
+                return;
+            }
+            viewport.scrollLeft += slides[0].offsetWidth;
+        });
+    });
+
+    navigationButtons.forEach(function(btn, index) {
+        btn.removeAttribute('href');
+        btn.addEventListener('click', function() {
+            viewport.scrollLeft = slides[0].offsetWidth * index;
+        });
+    });
+});
+

layouts/index.html

@@ -2,7 +2,7 @@
     <div class="cover__container">
         <div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
             <video playsinline autoplay muted loop>
-                <source src="https://static.etoiledebethleem.fr/videos/cover_trailer.webm" type="video/webm">
+                <source src="https://static.etoiledebethleem.fr/videos/teaser_v5.mp4" type="video/webm">
             </video>
         </div>
         <div class="cover__overlay">
@@ -45,7 +45,7 @@
 
                     <!-- Bourbon chateau, une crypte particulière, Les chartreux, Mignot et Villain -->
                     
-                    <li id="history__slide0" tabindex="0" class="carousel__slide">
+                    <li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div class="layout-grid-image third">
@@ -77,7 +77,7 @@
                         </div>
                     </li>
 
-                    <li id="history__slide1" tabindex="0" class="carousel__slide">
+                    <li id="history__slide1" tabindex="0" class="carousel__slide" data-slide-index="1">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div>
@@ -120,7 +120,7 @@
                         </div>
                     </li>
 
-                    <li id="history__slide2" tabindex="0" class="carousel__slide">
+                    <li id="history__slide2" tabindex="0" class="carousel__slide" data-slide-index="2">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div class="layout-grid-image half">
@@ -155,7 +155,7 @@
                     </li>
 
 
-                    <li id="history__slide3" tabindex="0" class="carousel__slide">
+                    <li id="history__slide3" tabindex="0" class="carousel__slide" data-slide-index="3">
                         <div class="slide-content history-component__container">
                             <div class="page-container slide-inner history-component__content">
                                 <div class="layout-grid-image half">
@@ -469,5 +469,6 @@
 
     {{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
     <script defer src="{{ $js.Permalink }}"></script>
+
 {{ end }}