generalize image slideshow generation

Remove hardcoded HTML for image slideshow and use jekyll's liquid configuration to generalize slideshow.

To update slideshow by adding/removing images, just add images to `assets/images/carousel/` and update `_data/imgcarousel.yml`

Author: owlang

_data/imgcarousel.yml

@@ -0,0 +1,28 @@
+- name: Lab Photo 2025
+  path: assets/images/carousel/250310_IMG_4270.jpg
+- name: Thanksgiving Turkey Trot (2024)
+  path: assets/images/carousel/241128_IMG_9648.jpg
+- name: Dr. Haining Chen's Defense (2024)
+  path: assets/images/carousel/241112_Chen_defense4.jpg
+- name: Lab Photo 2024
+  path: assets/images/carousel/240311_lab_photo_1.jpeg
+- name: Lab Anniversary (2024)
+  path: assets/images/carousel/240224_Lab Anniv Party 2.jpg
+- name: Lab Retreat 2023 (Watkins Glen)
+  path: assets/images/carousel/230706_IMG_1803.jpg
+- name: Lab Retreat 2023 (Watkins Glen)
+  path: assets/images/carousel/230706_IMG_1793.jpg
+- name: Lab Retreat 2023 (Watkins Glen)
+  path: assets/images/carousel/230706_IMG_1782.jpg
+- name: MBG Retreat 2022
+  path: assets/images/carousel/220816_IMG_5684.jpg
+- name: Lab Retreat 2021 (Stewart Park)
+  path: assets/images/carousel/210806_IMG_8865.jpg
+- name: Lab Retreat 2021 (Stewart Park)
+  path: assets/images/carousel/210806_IMG_8816.jpg
+- name: Lab Retreat 2021 (Stewart Park)
+  path: assets/images/carousel/210806_IMG_8785.jpg
+- name: Lab Retreat 2021 (Stewart Park)
+  path: assets/images/carousel/210806_IMG_4744.jpg
+- description: MBG Holiday party 2021
+  path: assets/images/carousel/211208_HolidayPartyUnicorns.jpg

_includes/mainSlideShow.html

@@ -1,36 +1,14 @@
 <div class="rounded my-3">
   <!-- Slideshow container -->
   <div class="slideshow-container">
-    <!-- Full-width images with number and caption text  -->
-    <div class="mySlides">
-      <img
-        src="assets/images/211208HolidayParty Unicorns.jpg"
-        class="slide-images"
-      />
-      <!-- <div class="numbertext">1 / 4</div>
-      <img src="/assets/images/slide1.png" class="slide-images" />
-      <div class="text">Caption Text</div> -->
-    </div>
-
-    <div class="mySlides">
-      <!-- <div class="numbertext">2 / 4</div> -->
-      <!-- <img src="/assets/images/slide2.png" class="slide-images" /> -->
-      <img src="assets/images/IMG_8865.jpg" class="slide-images" />
-      <!-- <div class="text">Caption Two</div> -->
-    </div>
 
-    <div class="mySlides">
-      <!-- <div class="numbertext">3 / 4</div> -->
-      <img src="assets/images/IMG_4744.jpg" class="slide-images" />
-      <!-- <img src="/assets/images/slide3.png" class="slide-images" /> -->
-      <!-- <div class="text">Caption Three</div> -->
-    </div>
-    <div class="mySlides">
-      <!-- <div class="numbertext">4 / 4</div> -->
-      <!-- <img src="/assets/images/slide4.png" class="slide-images" /> -->
-      <img src="assets/images/IMG_8785.jpg" class="slide-images" />
-      <!-- <div class="text">Caption Text</div> -->
-    </div>
+    <!-- Full-width images with number and caption text  -->
+    <!-- Update carousel by committing images and adding the paths and descriptions to _data/imgcarousel.yml -->
+    {% for item in site.data.imgcarousel %}
+      <div class="mySlides">
+        <img src="{{ item.path }}" class="slide-images" title="{{ item.description }}" />
+      </div>
+    {% endfor %}
 
     <!-- Next and previous buttons -->
     <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
@@ -39,10 +17,9 @@
 
   <!-- The dots/circles -->
   <div style="text-align: center">
-    <span class="dot" onclick="currentSlide(1)"></span>
-    <span class="dot" onclick="currentSlide(2)"></span>
-    <span class="dot" onclick="currentSlide(3)"></span>
-    <span class="dot" onclick="currentSlide(4)"></span>
+    {% for item in site.data.imgcarousel %}
+      <span class="dot" onclick="currentSlide({{ forloop.index }})"></span>
+    {% endfor %}
   </div>
 </div>