feat: added title to carousel and cleaned up styling

UCSD-E4E · Apr 23, 2024 · 83904d4 · 83904d4
1 parent 7d0c5c7
commit 83904d4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 18 deletions.
diff --git 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
+    - 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"
+    }
diff --git 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,14 +47,26 @@
                 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>
 
 <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>