feat:add carousel effect for metric banner in smaller screen (#132)

* feat:add carousel effect for metric banner in smaller screen * update:speed to 3s
computerclubkec · Oct 28, 2024 · 65c8c38 · 65c8c38
1 parent 8765ae3
commit 65c8c38
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 2 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -10,7 +10,8 @@
     <!-- Club Banner Starts Here -->
     <section id="club-banner">
       <div class="relative text-center">
-        <img loading="lazy"
+        <img
+          loading="lazy"
           src="/assets/images/banner.png"
           alt="KEC Computer Club Banner"
           class="w-full h-[45vh] sm:h-[50vh] object-cover"
@@ -47,7 +48,7 @@
     <!-- Club Banner Ends Here -->
 
     <!-- Metrics Banner Starts Here -->
-    <section id="metrics-banner">
+    <!-- <section id="metrics-banner">
       <div
         class="w-full p-12 bg-[{{site.bg-colors.darkBlue}}] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 justify-center gap-10 md:gap-40"
       >
@@ -68,12 +69,88 @@
           </div>
         </div>
 
+        <div class="text-center text-[{{site.text-colors.white}}]">
+          <div class="text-6xl font-bold font-montserrat mb-2">100+</div>
+          <div class="text-2xl font-bold font-inter">Members & Alumni</div>
+        </div>
+      </div>
+    </section> -->
+
+    <section
+      id="metrics-banner"
+      class="relative w-full bg-[{{site.bg-colors.darkBlue}}]"
+    >
+      <!-- Carousel for mobile view -->
+      <div class="flex items-center lg:hidden overflow-hidden p-6">
+        <div
+          class="carousel-wrapper flex transition-transform duration-500 ease-in-out w-full"
+        >
+          <div
+            class="carousel-item text-center text-white min-w-full flex-shrink-0"
+          >
+            <div class="text-6xl font-bold font-montserrat mb-2">50+</div>
+            <div class="text-2xl font-bold font-inter">Events Organized</div>
+          </div>
+          <div
+            class="carousel-item text-center text-white min-w-full flex-shrink-0"
+          >
+            <div class="text-6xl font-bold font-montserrat mb-2">500+</div>
+            <div class="text-2xl font-bold font-inter">Students Impacted</div>
+          </div>
+          <div
+            class="carousel-item text-center text-white min-w-full flex-shrink-0"
+          >
+            <div class="text-6xl font-bold font-montserrat mb-2">10+</div>
+            <div class="text-2xl font-bold font-inter">
+              Industry Collaborations
+            </div>
+          </div>
+          <div
+            class="carousel-item text-center text-white min-w-full flex-shrink-0"
+          >
+            <div class="text-6xl font-bold font-montserrat mb-2">100+</div>
+            <div class="text-2xl font-bold font-inter">Members & Alumni</div>
+          </div>
+        </div>
+        <!-- <button
+          class="carousel-button prev absolute left-4 top-1/2 transform -translate-y-1/2 bg-transparent text-white text-3xl"
+          onclick="moveSlide(-1)"
+        >
+          &#10094;
+        </button>
+        <button
+          class="carousel-button next absolute right-4 top-1/2 transform -translate-y-1/2 bg-transparent text-white text-3xl"
+          onclick="moveSlide(1)"
+        >
+          &#10095;
+        </button> -->
+      </div>
+
+      <!-- Grid for desktop view -->
+      <div
+        class="hidden lg:grid w-full p-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 justify-center gap-10 md:gap-40"
+      >
+        <div class="text-center text-[{{site.text-colors.white}}]">
+          <div class="text-6xl font-bold font-montserrat mb-2">50+</div>
+          <div class="text-2xl font-bold font-inter">Events Organized</div>
+        </div>
+        <div class="text-center text-[{{site.text-colors.white}}]">
+          <div class="text-6xl font-bold font-montserrat mb-2">500+</div>
+          <div class="text-2xl font-bold font-inter">Students Impacted</div>
+        </div>
+        <div class="text-center text-[{{site.text-colors.white}}]">
+          <div class="text-6xl font-bold font-montserrat mb-2">10+</div>
+          <div class="text-2xl font-bold font-inter">
+            Industry Collaborations
+          </div>
+        </div>
         <div class="text-center text-[{{site.text-colors.white}}]">
           <div class="text-6xl font-bold font-montserrat mb-2">100+</div>
           <div class="text-2xl font-bold font-inter">Members & Alumni</div>
         </div>
       </div>
     </section>
+
     <!-- Metrics Banner Ends Here -->
 
     <!-- Upcoming Events section starts Here -->

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -82,3 +82,37 @@ document.addEventListener("DOMContentLoaded", function () {
   // Attach the function to the global window object so it can be called from HTML
   window.showYear = showYear;
 });
+
+// carousel for metric banner
+
+let currentIndex = 0;
+
+document.addEventListener("DOMContentLoaded", () => {
+  let currentIndex = 0;
+
+  window.moveSlide = function (direction) {
+    const items = document.querySelectorAll(".carousel-item");
+    const totalItems = items.length;
+
+    // Update the current index
+    currentIndex += direction;
+
+    // Loop back to the start or end
+    if (currentIndex < 0) {
+      currentIndex = totalItems - 1;
+    } else if (currentIndex >= totalItems) {
+      currentIndex = 0;
+    }
+
+    // Calculate the translateX value
+    const offset = -currentIndex * 100; // Adjust the offset based on the current index
+    document.querySelector(
+      ".carousel-wrapper"
+    ).style.transform = `translateX(${offset}%)`;
+  };
+
+  // Optional: Auto-slide every 3 seconds
+  setInterval(() => {
+    moveSlide(1);
+  }, 3000);
+});