carousel

guybracha · Jun 10, 2024 · 2730942 · 2730942
1 parent 190e91e
commit 2730942
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -40,6 +40,52 @@ <h1 style="text-align: center; color: rgb(0, 134, 11);">A brave new world is her
     <div class="container-sm">
       <h4 style="text-align: center;">Coming Soon!</h4>
     </div>
+    <div id="carouselExampleIndicators" class="carousel slide">
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 8"></button>
+      </div>
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <img src="contents/gallery/Underwater-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/Space-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/Sewers-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/Grandmasters-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/Trap-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/GiganticGone-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/Monstro-min.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="contents/gallery/Twins-min.png" class="d-block w-100" alt="...">
+        </div>
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>
     <footer class="text-center">
         <a href="https://github.com/guybracha/compass-world">Src code</a>
         <br>