Create basic slider

assets/main.scss

@@ -63,14 +63,23 @@ h1 {
 
         > .slider {
             width: calc(100% - 60px);
-            // height: 250px;
+            height: 250px;
             display: flex;
             padding: 0 10px;
             border-right: 20px solid $color_red;
             border-left: 20px solid $color_red;
+            position: relative;
 
             > img {
-                width: 100%;
+                width: calc(100% - 20px);
+                // display: block;
+                position: absolute;
+                opacity: 1;
+                transition: opacity 2.5s ease-in-out;
+
+                &.hidden {
+                    opacity: 0;
+                }
             }
         }
 
@@ -130,6 +139,7 @@ h1 {
 
         #content {
             flex: 100% 0 1;
+            text-align: justify;
 
             table {
                 width: 100%;
@@ -156,7 +166,7 @@ h1 {
 
             .float-right {
                 float: right;
-                margin-left: 15px;
+                margin: 7px 0 7px 15px;
             }
 
             a {

themes/tsc_vfl/static/js/slider.js

@@ -0,0 +1,26 @@
+$(function () {
+    var index = 0
+    const maxIndex = 5
+    const delay = 7000
+    function showImage(idx) {
+        const imgs = $('#header .slider img')
+        imgs.eq(idx).removeClass('hidden')
+        imgs.filter((i, e) => {return i != idx}).addClass('hidden')
+    }
+    function getNextIndex() {
+        const ret = index + 1
+        if (ret > maxIndex) {
+            return 0
+        } else {
+            return ret
+        }
+    }
+    function nextImage() {
+        const newIdx = getNextIndex()
+        console.log("switching to index", newIdx)
+        showImage(newIdx)
+        index = newIdx
+        setTimeout(nextImage, delay)
+    }
+    setTimeout(nextImage, delay)
+})