diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss
index 1ed6d50..8ecdf4f 100644
--- a/themes/tsc_vfl/assets/css/main.scss
+++ b/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;
diff --git a/themes/tsc_vfl/layouts/partials/page/header.html b/themes/tsc_vfl/layouts/partials/page/header.html
index 08701bd..60894a0 100644
--- a/themes/tsc_vfl/layouts/partials/page/header.html
+++ b/themes/tsc_vfl/layouts/partials/page/header.html
@@ -9,7 +9,7 @@
-
+
diff --git a/themes/tsc_vfl/static/js/slider.js b/themes/tsc_vfl/static/js/slider.js
index cecef57..1f93d03 100644
--- a/themes/tsc_vfl/static/js/slider.js
+++ b/themes/tsc_vfl/static/js/slider.js
@@ -1,16 +1,31 @@
$(function () {
var index = 0
const maxIndex = 5
- const delay = 7000
- function showImage(idx) {
- // console.log("switching to index", idx)
+ const delay = 6000
+ const shuffeledIndices = []
+
+ 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')
- index = idx
+ dots.eq(idxidx).addClass('active')
+ 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')