Rotating images

steph1111 · steph1111 · commit 9e80b8a54df1 · 2024-08-21T14:33:40.000-07:00
diff --git a/_data/team-imgs.yml b/_data/team-imgs.yml
@@ -0,0 +1,4 @@
+- https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/41309abdbb5d93dbc6c0119bf8f97a3bb38ad743/assets/images/seahawk-II/gallery-seahawk-II/interview.webp
+- https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/41309abdbb5d93dbc6c0119bf8f97a3bb38ad743/assets/images/seahawk-II/gallery-seahawk-II/stack.webp
+- https://github.com/CabrilloRoboticsClub/cabrillorobotics.github.io/blob/258a1699f10c378fb2a1d18c2a986080bf3b6a57/assets/images/seahawk-II/gallery-seahawk-II/deploy.jpeg?raw=true
+- https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/782b579c031c16835e0fee2b57a22246c1a79618/assets/images/seahawk-II/gallery-seahawk-II/product-demo-pilot-2.webp
diff --git a/_includes/team-showcase.html b/_includes/team-showcase.html
@@ -1,5 +1,5 @@
 <section class="hero is-halfheight has-text-left" id="team-showcase">
-    <figure class="hero-background" style="background-image: url('https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/41309abdbb5d93dbc6c0119bf8f97a3bb38ad743/assets/images/seahawk-II/gallery-seahawk-II/interview.webp');">
+    <figure class="hero-background" id="rotating-image">
         <div class="overlay">
             <div class="container is-centered">
                 <div class="title-text">
@@ -12,3 +12,26 @@ <h1 class="title has-text-white-ter is-size-1 is-uppercase has-text-weight-bold"
     </figure>
 </section>
 
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const images = [
+            {% for image in site.data.team-imgs %}
+                "{{ image.url }}"{% unless forloop.last %},{% endunless %}
+            {% endfor %}
+        ];
+
+        let currentIndex = 0;
+        const imageElement = document.getElementById('rotating-image');
+
+        function rotateImage() {
+            imageElement.style.backgroundImage = `url(${images[currentIndex]})`;
+            currentIndex = (currentIndex + 1) % images.length;
+        }
+
+        // Rotate the image every 5 seconds
+        setInterval(rotateImage, 5000);
+
+        // Set the initial image
+        rotateImage();
+    });
+</script>
diff --git a/_layouts/team.html b/_layouts/team.html
@@ -11,9 +11,10 @@
 
 <body>
     {% include navbar.html %}
+    {% include team-showcase.html %}
     <section class="section has-text-centered has-background-black-bis" id="team">
         <div class="container">
-            {% include team-showcase.html %}
+            
             <!-- <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
                 Our Team
             </h2> -->
