Added cinewhoop image using carousel.

public/index.html

@@ -112,8 +112,37 @@
             FPV beelden vertellen een compleet verhaal in één vlucht. Ze zijn ideaal voor bedrijfsvideo's, vastgoed, concerten, festivals, (sport)evenementen en bruiloften. FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers.
           </p>
         </div>
-        <div class="col-md">
+        <div class="col-md mt-0">
-          <img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van een 7-inch FPV drone met GoPro.">
+          <div id="carouselExampleCaptions" class="carousel slide">
+            <div class="carousel-indicators">
+              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+            </div>
+            <div class="carousel-inner text-shadow">
+              <div class="carousel-item active">
+                <img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
+                <div class="carousel-caption d-none d-md-block">
+                  <!-- <h3>First slide label</h3> -->
+                  <p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img class="d-block img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
+                <div class="carousel-caption d-none d-md-block">
+                  <!-- <h3>Second slide label</h3> -->
+                  <p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
+                </div>
+              </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+          </div>
         </div>
       </div>
     </section>

src/scss/styles.scss

@@ -16,6 +16,9 @@ $primary: $red; // Default: $blue
 @import "../../node_modules/bootstrap/scss/variables-dark";
 
 // Include any default map overrides here
+$carousel-dark-indicator-active-bg:  $white;
+$carousel-dark-caption-color:        $white;
+$carousel-dark-control-icon-filter:  unset;
 
 // Include remainder of required parts
 @import "../../node_modules/bootstrap/scss/maps";
@@ -31,6 +34,7 @@ $primary: $red; // Default: $blue
 @import "../../node_modules/bootstrap/scss/navbar"; // Requires nav
 @import "../../node_modules/bootstrap/scss/buttons";
 @import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/carousel";
 @import "../../node_modules/bootstrap/scss/images";
 @import "../../node_modules/bootstrap/scss/transitions";
 // @import "../../node_modules/bootstrap/scss/accordion";
@@ -38,7 +42,6 @@ $primary: $red; // Default: $blue
 // @import "../../node_modules/bootstrap/scss/badge";
 // @import "../../node_modules/bootstrap/scss/breadcrumb";
 // @import "../../node_modules/bootstrap/scss/button-group";
-// @import "../../node_modules/bootstrap/scss/carousel";
 // @import "../../node_modules/bootstrap/scss/close";
 // @import "../../node_modules/bootstrap/scss/dropdown";
 // @import "../../node_modules/bootstrap/scss/forms";