From 83904d4b6cdbb77398c25235368d48e41cf016bb Mon Sep 17 00:00:00 2001
From: Sean Perry <sean.hyatt.perry@gmail.com>
Date: Tue, 23 Apr 2024 00:33:53 -0700
Subject: [PATCH] feat: added title to carousel and cleaned up styling

---
 _data/carousels.yml     | 32 ++++++++++++++++----------------
 _includes/carousel.html | 31 +++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/_data/carousels.yml b/_data/carousels.yml
index 0a25d52e..f3aef3c0 100644
--- a/_data/carousels.yml
+++ b/_data/carousels.yml
@@ -1,18 +1,18 @@
 carousels:
   - images: 
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_plane_launch.jpg
-    - image: /assets/banner_tiger.jpg
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_plane_launch.jpg
-    - image: /assets/banner_tiger.jpg
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_plane_launch.jpg
-    - image: /assets/banner_tiger.jpg
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_guatemala.jpg
-    - image: /assets/banner_plane_launch.jpg
-    - image: /assets/banner_tiger.jpg
-    - image: /assets/banner_guatemala.jpg
\ No newline at end of file
+    - image: {
+      "url": /assets/banner_guatemala.jpg,
+      "title": "TEST TITLE GUATEMALAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+    }
+    - image: {
+      "url": /assets/banner_guatemala.jpg,
+      "title": "TEST TITLE GUATEMALAaaaa"
+    }
+    - image: {
+      "url": /assets/banner_plane_launch.jpg,
+      "title": "TEST TITLE PLANE"
+    }
+    - image: {
+      "url": /assets/banner_tiger.jpg,
+      "title": "TEST TITLE TIGER"
+    }
\ No newline at end of file
diff --git a/_includes/carousel.html b/_includes/carousel.html
index e6396993..16bc6263 100644
--- a/_includes/carousel.html
+++ b/_includes/carousel.html
@@ -36,7 +36,7 @@
         <div class="carousel__track">
           <ul>
             {% for item in carousels[number].images %}
-            <li class="carousel__slide" style="background-image: url('{{ item.image }}');"></li>
+            <li class="carousel__slide" style="background-image: url('{{ item.image['url'] }}');"></li>
             {% endfor %}
           </ul>
         </div>
@@ -47,7 +47,18 @@
                 for="{{ number }}{{ letters[forloop.index0] }}"
                 onclick="onClick()"
               ></label>
+              
             {% endfor %}
+           
+        </div>
+        <div class="carousel__track">
+          <ul>
+            {% for item in carousels[number].images %}
+            <li class="carousel__slide" style="bottom: 0px; color: white;">
+              <p class="carousel_title"> {{item.image['title']}} </p>
+            </li>
+            {% endfor %}
+          </ul>
         </div>
     </div>
 </div>
@@ -55,6 +66,7 @@
 <style>
 .carousel__holder {width: 100%; position: relative; padding-bottom: {{ include.height }}{{ include.unit }}; margin: 1rem 0 1rem;}
 .carousel {
+  caret-color: transparent;
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -122,9 +134,12 @@
 }
 .carousel__indicators {
   position: absolute;
-  bottom: 20px;
+  bottom: 0;
+  height: 50px;
   width: 100%;
   text-align: center;
+  background-color: #0000006b;
+  padding-top: 5px;
 }
 .carousel__indicator {
   height: 15px;
@@ -190,6 +205,18 @@
   background-position: center;
 }
 {% endfor %}
+
+.carousel_title { 
+    width: 90%;
+    bottom: -5px;
+    color: white;
+    position: absolute;
+    left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    text-align: justify;
+}
 </style>
 
 <script>