Enable animation correctly and randomly

themes/tsc_vfl/assets/css/main.scss

@@ -79,7 +79,10 @@ h1 {
                 position: absolute;
                 z-index: 0;
                 opacity: 1;
-                transition: opacity 2.5s ease-in-out;
+                
+                &.animated {
+                    transition: opacity 2.5s ease-in-out;
+                }
 
                 &.hidden {
                     opacity: 0;

themes/tsc_vfl/layouts/partials/page/header.html

@@ -9,7 +9,7 @@
     </div>
     <div class="slider">
         <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder">
-        <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="slider-img">
+        <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="hidden slider-img">
         <img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img">
         <img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img">
         <img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img">

themes/tsc_vfl/static/js/slider.js

@@ -1,16 +1,31 @@
 $(function () {
     var index = 0
     const maxIndex = 5
-    const delay = 7000
+    const delay = 6000
-    function showImage(idx) {
+    const shuffeledIndices = []
-        // console.log("switching to index", idx)
+
+    for(let i=0; i<=maxIndex; i++){
+        shuffeledIndices.push(i)
+    }
+
+    // Shuffle by Fisher-Yates algorithm
+    for(let i=maxIndex; i>= 0; i--) {
+        const j = Math.floor(Math.random() * (i+1))
+        const tmp = shuffeledIndices[j]
+        shuffeledIndices[j] = shuffeledIndices[i]
+        shuffeledIndices[i] = tmp
+    }
+
+    function showImage(idxidx) {
+        const idx = shuffeledIndices[idxidx]
+        console.log("switching to index", idx, ' using idxidx ', idxidx)
         const imgs = $('#header .slider .slider-img')
         imgs.eq(idx).removeClass('hidden')
         imgs.filter((i, e) => {return i != idx}).addClass('hidden')
         const dots = $('#header .slider .dots .dot')
         dots.removeClass('active')
-        dots.eq(idx).addClass('active')
+        dots.eq(idxidx).addClass('active')
-        index = idx
+        index = idxidx
     }
     function getNextIndex() {
         const ret = index + 1
@@ -25,7 +40,15 @@ $(function () {
         showImage(newIdx)
         setTimeout(nextImage, delay)
     }
-    // setTimeout(nextImage, delay)
+
+    showImage(0)
+
+    // Start the animaions delayed to allow for showing the first image directly
+    setTimeout(() => {
+        $('#header .slider .slider-img').addClass('animated')
+    }, 150)
+
+    setTimeout(nextImage, delay)
     $('#header .slider .dots .dot').click(function (evt) {
         // console.log(evt)
         const newIdx = $(evt.target).data('index')