carousel done

assets/css/single-spectacle.css

@@ -16,9 +16,16 @@
     }
 }
 
+#galerie picture.goR {
+    visibility: hidden;
+    transition:
+        visibility .01s,
+        transform .01s;
+}
 
 #galerie picture {
+    visibility: visible;
     transition: 
-        visibility .01s,
         transform 2s ease;
 }
+

assets/js/index-news-carousel.js

@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let currentIndex = 0;
+    const items = document.querySelectorAll('.newscarousel .newscarousel-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 = 5000; // 3000ms = 3 seconds
+setInterval(moveToNextItem, interval);
+
+updateCarousel();
+});

assets/js/index-pics-carousel.js

@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let currentIndex = 0;
+    const items = document.querySelectorAll('.carousel-item');
+    const totalItems = items.length;
+
+    items.forEach((item, index) => {
+        if ( index !== 0 ) {
+            item.classList.add('is-invisible')
+            item.style.transform = "translateX(100%)";
+        } else {
+            item.classList.add('is-block')
+        };
+        item.style.transition = "transform 2s ease";
+    });
+
+    function moveToNextItem() {
+        currentIndex = (currentIndex + 1) % totalItems;
+        updateCarousel();
+    }
+
+    function updateCarousel() {
+        items.forEach((item, index) => {
+            if (index === currentIndex) {
+                item.classList.remove('is-invisible');
+                item.classList.add('is-block');
+                item.style.transform = "translateX(0)";
+            } else if (currentIndex === 0 && index === totalItems - 1) {
+                item.style.transform = "translateX(-100%)";
+            } else if (index === currentIndex -1) {
+                item.style.transform = "translateX(-100%)";
+            } else {
+                item.classList.remove('is-block');
+                item.classList.add('is-invisible');
+                item.style.transform = "translateX(100%)";
+            }
+        })
+    }
+    setInterval(moveToNextItem, 4000);
+});

assets/js/single-spectacle-carousel.js

@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var slider = document.querySelector('#galerie');
+    var items = slider.querySelectorAll('picture');
+    let itemWidth = items[0].offsetWidth;
+    let currentIndex = 0;
+
+    function moveItems() {
+        currentIndex = (currentIndex + 1);
+        let translationVector;
+        let transientTranslationVector;
+        let modIndex;
+        modIndex = currentIndex % items.length;
+        items.forEach((item, index) => {
+            //item.style.visibility = "visible";
+            if (modIndex < 2) {
+                if (index <= items.length + modIndex - 2) {
+                    if ((index == items.length + modIndex - 2)  && (currentIndex >= items.length)) {
+                        console.log("hide it");
+                        item.classList.add("goR");
+                        //item.style.visibility = "hidden";
+                        transientTranslationVector = (modIndex - 1) * -1 * itemWidth;
+                        item.style.transition = 'none';
+                        item.style.transform = `translateX(${transientTranslationVector}px)`;
+                        item.offsetHeight;
+                        item.style.transition = '';
+                        item.classList.remove("goR");
+                        // setTimeout(function() {
+                        //    item.classList.remove("goR")
+                        // }, 100)
+                    }
+                    translationVector = modIndex * -1 * itemWidth;
+                } else {
+                    translationVector = items.length * -1 * itemWidth;
+                }
+            } else {
+                if (index <= modIndex - 2){
+                    if (index == modIndex - 2) {
+                        item.classList.add("goR");
+                        //item.style.visibility = "hidden"
+                        transientTranslationVector = (items.length + 1 - modIndex) * itemWidth;
+                        item.style.transition = 'none';
+                        item.style.transform = `translateX(${transientTranslationVector}px)`;
+                        item.offsetHeight;
+                        item.style.transition = '';
+                        item.classList.remove("goR");
+                        // setTimeout(function() {
+                        //    item.classList.remove("goR")   
+                        // }, 100)
+                    }
+                    translationVector = (items.length - modIndex) * itemWidth;
+                } else {
+                    translationVector = modIndex * -1 * itemWidth;
+                } 
+            };
+            //translationVector = itemWidth * modIndex * -1;
+            console.log(translationVector);
+            item.style.transform = `translateX(${translationVector}px)`;
+            // setTimeout(function() {
+            //     item.style.transform = `translateX(${translationVector}px)`;
+            // }, 100)
+        });
+    }
+    if (items.length > 3){
+        setInterval(moveItems, 5000); // Move items every 5 seconds
+    }
+});

assets/js/single-spectacle-carousel_bak.js

@@ -0,0 +1,60 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var slider = document.querySelector('#galerie');
+    var items = slider.querySelectorAll('picture');
+    let itemWidth = items[0].offsetWidth;
+    let currentIndex = 0;
+
+    function moveItems() {
+        currentIndex = (currentIndex + 1);
+        let translationVector;
+        let fastTranslationVector;
+        let modIndex;
+        modIndex = currentIndex % items.length;
+        items.forEach((item, index) => {
+           
+            //item.style.visibility = "visible";
+             if (modIndex >= 3 ) {
+                if  (index <= modIndex - 3) {
+                    if (index == modIndex - 3) {
+                        item.classList.add("goR");
+                        fastTranslationVector = (3 + items.length - modIndex) * itemWidth;
+                        item.style.transform = `translateX(${fastTranslationVector}px)`;
+                        setTimeout(function () {
+                            item.classList.remove("goR");
+                        }, 1000);
+                    }
+                    item.classList.remove("goR");
+                    translationVector = (items.length - modIndex) * itemWidth;
+                } else {
+                    translationVector = itemWidth * -1 * modIndex;
+                }
+            } else if (modIndex < 3) {
+                if (index <= modIndex + (items.length - 3)) {
+                    if ((index == modIndex + (items.length - 3)) && (currentIndex >= items.length)){
+                        item.classList.add("goR");
+                        fastTranslationVector = (3 + items.length - modIndex) * itemWidth;
+                        item.style.transform = `translateX(${fastTranslationVector}px)`;
+                        setTimeout(function () {
+                            item.classList.remove("goR");
+                        }, 1000);
+                    }
+                    translationVector = itemWidth * -1 * modIndex;
+                } else {
+                    if (currentIndex < items.length) {
+                        translationVector = -1 * itemWidth * modIndex;
+                    } else {
+                        translationVector = -1 * (items.length + modIndex) * itemWidth;
+                    }
+                }
+                
+                
+             };
+            //translationVector = itemWidth * modIndex * -1;
+            console.log(translationVector);
+            item.style.transform = `translateX(${translationVector}px)`;
+        });
+    }
+    if (items.length > 3){
+        setInterval(moveItems, 5000); // Move items every 5 seconds
+    }
+});

layouts/index.html

@@ -83,76 +83,11 @@
 {{ end }}
 
 {{ define "scripts"}}
+{{ $picsCarousel := resources.Get "js/index-pics-carousel.js" | js.Build }}
+<script src="{{ $picsCarousel.RelPermalink }}"></script>
 
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        let currentIndex = 0;
-        const items = document.querySelectorAll('.carousel-item');
-        const totalItems = items.length;
-
-        items.forEach((item, index) => {
-            if ( index !== 0 ) {
-                item.classList.add('is-invisible')
-                item.style.transform = "translateX(100%)";
-            } else {
-                item.classList.add('is-block')
-            };
-            item.style.transition = "transform 2s ease";
-        });
-
-        function moveToNextItem() {
-            currentIndex = (currentIndex + 1) % totalItems;
-            updateCarousel();
-        }
-
-        function updateCarousel() {
-            items.forEach((item, index) => {
-                if (index === currentIndex) {
-                    item.classList.remove('is-invisible');
-                    item.classList.add('is-block');
-                    item.style.transform = "translateX(0)";
-                } else if (currentIndex === 0 && index === totalItems - 1) {
-                    item.style.transform = "translateX(-100%)";
-                } else if (index === currentIndex -1) {
-                    item.style.transform = "translateX(-100%)";
-                } else {
-                    item.classList.remove('is-block');
-                    item.classList.add('is-invisible');
-                    item.style.transform = "translateX(100%)";
-                }
-            })
-        }
-        setInterval(moveToNextItem, 4000);
-    });
-</script>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        let currentIndex = 0;
-        const items = document.querySelectorAll('.newscarousel .newscarousel-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 = 5000; // 3000ms = 3 seconds
-    setInterval(moveToNextItem, interval);
-
-    updateCarousel();
-});
-</script>
+{{ $newsCarousel := resources.Get "js/index-news-carousel.js" | js.Build }}
+<script src="{{ $newsCarousel.RelPermalink }}"></script>
 
 <script type="application/ld+json">
     {

layouts/spectacles/single.html

@@ -126,16 +126,16 @@
         {{ end }}
     </div>
 </section>
-<section class="section is-large m-0 p-6 has-background-black">
-    <h2 class="subtitle">Galerie</h2>
-    <div class="container">
+<section class="section is-large m-0 pl-0 mr-7 py-6 has-background-black">
+    <h2 class="subtitle pl-6">Galerie</h2>
+    <div class="container m-0" style="overflow-x: hidden; max-width: 100%;">
         <div id="galerie" class="carousel is-flex is-flex-direction-row"> <!--style="overflow-x: hidden;" >-->
             {{ $imgs := (resources.Match ( print .File.Dir "/*")).ByType "image" }}
 
             {{ with $imgs }}
-            {{ range first 10 . }}
-            {{- $jpeg := .Resize "600x jpeg" }}
-            {{- $webp := .Resize "600x webp picture" }}
+            {{ range . }}
+            {{- $jpeg := .Resize "364x jpeg" }}
+            {{- $webp := .Resize "364x webp picture" }}
             <picture class="is-flex is-flex-grow-0 is-flex-shrink-0">
                 <source srcset="{{ $webp.Permalink }}" type="image/webp">
                 <img  src='{{ $jpeg.Permalink }}' loading="lazy" style="width: 100%; height: auto; object-fit: contain;" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
@@ -149,62 +149,9 @@
 {{ end }}
 
 {{ define "scripts" }}
-<script>
+{{ $carousel := resources.Get "js/single-spectacle-carousel.js" | js.Build }}
 
-    document.addEventListener('DOMContentLoaded', function() {
-        var slider = document.querySelector('#galerie');
-        var items = slider.querySelectorAll('picture');
-        let itemWidth = items[0].offsetWidth;
-        let currentIndex = 0;
-
-        function moveItems() {
-            currentIndex = (currentIndex + 1);
-            let translationVector;
-            let modIndex;
-            modIndex = currentIndex % items.length;
-            // if (currentIndex > items.length +1 ) {
-            //     modIndex = currentIndex % items.length;
-            // } else {
-            //     modIndex = currentIndex;
-            // }
-            //modIndex = currentIndex;
-            items.forEach((item, index) => {
-                item.style.visibility = "visible";
-                 if (modIndex >= 3 ) {
-                    if  (index <= modIndex - 3) {
-                        if (index == modIndex - 3) {
-                            item.style.visibility = "hidden";
-                        }
-                        translationVector = (items.length - modIndex) * itemWidth;
-                    } else {
-                        translationVector = itemWidth * -1 * modIndex;
-                    }
-                } else if (modIndex < 3) {
-                    if (index <= modIndex + (items.length - 3)) {
-                        if ((index == modIndex + (items.length - 3)) && (currentIndex >= items.length)){
-                            item.style.visibility = "hidden";
-                        }
-                        translationVector = itemWidth * -1 * modIndex;
-                    } else {
-                        if (currentIndex < items.length) {
-                            translationVector = -1 * itemWidth * modIndex;
-                        } else {
-                            translationVector = -1 * (items.length + modIndex) * itemWidth;
-                        }
-                    }
-                    
-                    
-                 };
-                //translationVector = itemWidth * modIndex * -1;
-                console.log(translationVector);
-                item.style.transform = `translateX(${translationVector}px)`;
-            });
-        }
-        if (items.length > 3){
-            setInterval(moveItems, 5000); // Move items every 5 seconds
-        }
-    });
-</script>
+<script src="{{ $carousel.RelPermalink}}"></script>
 
 <script type="application/ld+json">
     {