moving banner

_includes/head.liquid

@@ -124,4 +124,4 @@
 
 {% if page.tikzjax %}
   <link defer rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
-{% endif %}
+{% endif %}

_includes/header.liquid

@@ -1,9 +1,17 @@
 <header>
   <!-- Nav Bar -->
   {% if site.banner %}
-      <div class="container" style="position: relative; width: fit-content; padding: 0;">
-            <img src="/{{site.banner}}" class="banner" alt="Banner Image" style="width: 100%; height: auto;">
-      </div>
+        <div class="container">
+        <div class="carousel-container" style="position: relative; width: fit-content; padding: 0;">
+            <div id="carousel" class="carousel">
+                <img class="carousel-image" src="/assets/img/banners/banner1.jpg" alt="Banner Image">
+                <img class="carousel-image" src="/assets/img/banners/banner2.jpg" alt="Banner Image">
+                <img class="carousel-image" src="/assets/img/banners/banner3.jpg" alt="Banner Image">
+                <img class="carousel-image" src="/assets/img/banners/banner4.jpg" alt="Banner Image">
+                <img class="carousel-image" src="/assets/img/banners/banner1.jpg" alt="Banner Image">
+            </div>
+            </div>
+        </div>
   {% endif %}
   <nav id="navbar" class="navbar container navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}" role="navigation">
       {% if site.enable_navbar_social %}
@@ -114,4 +122,34 @@
       </div>
     </progress>
   {% endif %}
+<style>
+.carousel-container {
+    height: 15vw;
+    max-height: 160px;
+    overflow: hidden; /* hide the overflow */
+}
+
+.carousel {
+    width: 100%; /* 1 image, 100% of container width */
+    height: 500%; /* 5 images, each 100% of container height */
+    animation: carousel 100s infinite linear;
+}
+
+.carousel-image {
+    float: left; /* add this line */
+    width: 100%; /* each image takes up 100% of the carousel width */
+    height: 20%; /* each image takes up 20% of the carousel height */
+}
+
+@keyframes carousel {
+    0%, 19% { transform: translateY(0); }
+    20%, 39% { transform: translateY(-20%); }
+    40%, 59% { transform: translateY(-40%); }
+    60%, 79% { transform: translateY(-60%); }
+    80%, 99% { transform: translateY(-80%); }
+    100%, 119% { transform: translateY(-100%); }
+    120%, 139% { transform: translateY(-120%); } /* back to the first image */
+    140%, 150% { transform: translateY(-140%); } /* pause at the first image */
+}
+</style>
 </header>