nipunbatra
diff --git a/‎group.qmd
Lines changed: 51 additions & 0 deletions b/‎group.qmd
Lines changed: 51 additions & 0 deletions
diff --git a/‎images/group/2023-cake.jpg
3.29 MB b/‎images/group/2023-cake.jpg
3.29 MB
diff --git a/‎images/group/2023-group.jpg
2.58 MB b/‎images/group/2023-group.jpg
2.58 MB
@@ -6,6 +6,57 @@ output:
 ---
 ### Some group photos and memories (to come soon..)
 
+```{=html}
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+<style>
+/* Custom style to prevent carousel from being distorted 
+   if for some reason image doesn't load */
+.carousel-item{
+    min-height: 280px;
+    max-height: 350px;
+}
+</style>
+</head>
+<body>
+<div class="container-lg my-3">
+    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+        <!-- Carousel indicators -->
+        <ol class="carousel-indicators">
+            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
+            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
+            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
+        </ol>
+        
+        <!-- Wrapper for carousel items -->
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+                <img src="images/group/2023-group.jpg" class="d-block w-100" alt="Slide 1">
+                <div class="carousel-caption d-none d-md-block">
+                    <h5>2 May 2023</h5>
+                    <p>Batch of 2023 (Saagar, Aadesh, Xhitij, Nipun, Zeel (not batch of 2023), Ankita, Eshan, Hitarth, Gautam</p>
+                </div>
+            </div>
+            <div class="carousel-item">
+                <img src="images/group/2023-cake.jpg" class="d-block w-100" alt="Slide 2">
+                <div class="carousel-caption d-none d-md-block">
+                    <h5>2 May 2023/h5>
+                    <p>Cake by batch of 2023</p>
+                </div>
+            </div>
+          
+        </div>
+
+        <!-- Carousel controls -->
+        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon"></span>
+        </a>
+        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
+            <span class="carousel-control-next-icon"></span>
+        </a>
+    </div>
+ ```
+
 ```{=html}
 <!-- Image Carousel with CSS in Quarto
 <div class="carousel">