add xxs and news carousel

layouts/index.html

@@ -8,11 +8,13 @@
         <div id="galerie" class="carousel">
                 {{ $carouselImages := resources.Match "carousel/*"}}
                 {{ range $index, $image := $carouselImages }}
+                {{- $jpegxxs := $image.Resize (printf "%dx jpeg q%d" 412 75) }}
                 {{- $jpegxs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
                 {{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 1024 75) }}
                 {{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
                 {{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 1920 75) }}
                 {{- $jpegxl := $image.Resize (printf "%dx jpeg q%d" 2560 75) }}
+                {{- $webpxxs := $image.Resize (printf "%dx webp q%d picture" 412 75) }}
                 {{- $webpxs := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
                 {{- $webps := $image.Resize (printf "%dx webp q%d picture" 1024 75) }}
                 {{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
@@ -21,12 +23,14 @@
                 <figure class="image">
                     <picture>
                         <source type="image/webp" 
-                            srcset="{{ $webpxs.Permalink }} {{ $webps.Width }}w,
+                            srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
+                                    {{ $webpxs.Permalink }} {{ $webpxs.Width }}w,
                                     {{ $webps.Permalink }} {{ $webps.Width }}w,
                                     {{ $webpm.Permalink }} {{ $webpm.Width }}w,
                                     {{ $webpl.Permalink }} {{ $webpl.Width }}w,
                                     {{ $webpxl.Permalink }} {{ $webpl.Width }}w"
-                            sizes="(max-width: 767x) 100vw, 
+                            sizes="(max-with: 411x) 100vw,
+                                    (max-width: 767x) 412px, 
                                     (max-width: 1023px) 768px, 
                                     (max-width: 1439px) 1024px, 
                                     (max-width: 1919px) 1440px,
@@ -36,12 +40,14 @@
                             width="{{ $jpegxl.Width }}"
                             height="{{ $jpegxl.Height }}"
                             {{ if ne $index 0 }} loading="lazy" {{ end }} 
-                            srcset="{{ $jpegxs.Permalink }} {{ $jpegs.Width }}w,
+                            srcset="{{ $jpegxxs.Permalink }} {{ $jpegxxs.Width }}w,
+                                    {{ $jpegxs.Permalink }} {{ $jpegxs.Width }}w,
                                     {{ $jpegs.Permalink }} {{ $jpegs.Width }}w,
                                     {{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
                                     {{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
                                     {{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"  
-                            sizes="(max-width: 767px) 100vw, 
+                            sizes="(max-with: 411x) 100vw,
+                                    (max-width: 767x) 412px, 
                                     (max-width: 1023px) 768px,
                                     (max-width: 1439px) 1024px, 
                                     (max-width: 1919px) 1440px,
@@ -55,16 +61,15 @@
 
         
 
-        <div id="news" class="carousel box overlay">
-            {{ range where .Site.RegularPages "Section" "spectacles" }}
-            {{ if and (isset .Params "actu") (.Params.actu) }}
-            <div class="text-center has-text-warning-light">
+        <div id="news" class="mcarousel box overlay">
+            {{ $spectacles := where .Site.RegularPages "Section" "spectacles" }}
+            {{ range $index, $page := where $spectacles ".Params.actu" "!=" nil }}
+            <div class="mcarousel-item text-center has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
                 <div class="title py-3">Actualités</div>
                 <div class="subtitle has-text-warning-light">{{ .Title }}</div>
                 <p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
             </div>
             {{ end }}
-            {{ end }}
 
         </div>
 
@@ -72,6 +77,33 @@
 {{ end }}
 
 {{ define "scripts"}}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        let currentIndex = 0;
+        const items = document.querySelectorAll('.mcarousel .mcarousel-item');
+        const totalItems = items.length;
+
+        function moveToNextItem() {
+            currentIndex = (currentIndex + 1) % totalItems;
+            updateCarousel();
+            }
+
+        function updateCarousel() {
+            items.forEach((item, index) => {
+            item.classList.remove('is-block');
+            item.classList.add('is-hidden');
+            if (index === currentIndex) {
+                    item.classList.remove('is-hidden')
+                    item.classList.add('is-block');
+                    }
+                });
+            }
+    const interval = 3000; // 3000ms = 3 seconds
+    setInterval(moveToNextItem, interval);
+
+    updateCarousel();
+});
+</script>
 <script>
     bulmaCarousel.attach('#galerie', {
     slidesToScroll: 1,