Update carousel.html

Author: chellem

_includes/carousel.html

@@ -1,28 +1,25 @@
 <div class="col-lg-10 col-lg-offset-1 centered">
-    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
-        <!-- Indicators -->
-        <ol class="carousel-indicators">
-            {% for img in page.carousel %}
-                <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.index0 }}" 
-                {% if forloop.index0 == 0 %}
-                    class="active"
-                {% endif %}>
-                </li>
-            {% endfor %}
-        </ol>
-
+    <div id="carousel-generic" class="carousel slide carousel-fade" data-bs-ride="carousel">
         <!-- Wrapper for slides -->
         <div class="carousel-inner">
             {% for img in page.carousel.first %}
-                <div class="item active">
-                    <img src="{{ "/assets/img/project/carousel/" | prepend: site.baseurl }}{{ img }}" alt="">
+                <div class="carousel-item active">
+                    <img src="{{ "/assets/img/project/" | prepend: site.baseurl }}{{ img }}" alt="" class="d-block w-100">
                 </div>
             {% endfor %}
             {% for img in page.carousel offset:1 %}
-                <div class="item">
-                    <img src="{{ "/assets/img/project/carousel/" | prepend: site.baseurl }}{{ img }}" alt="">
+                <div class="carousel-item">
+                    <img src="{{ "/assets/img/project/" | prepend: site.baseurl }}{{ img }}" alt="" class="d-block w-100">
                 </div>
             {% endfor %}
         </div>
-    </div> <!--/Carousel -->
+        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-generic" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carousel-generic" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+        </button>
+    </div>
 </div>