feat: enhance carousel functionality and styling for mobile responsiveness

Author: jkyberneees

index.html

@@ -210,16 +210,29 @@ <h3>bungate</h3>
                   <span>TypeScript</span>
                   <button class="copy-btn" aria-label="Copy code">Copy</button>
                 </div>
-                <pre><code><span class="k">import</span> { Gateway } <span class="k">from</span> <span class="s">'bungate'</span>;
+                <pre><code><span class="k">import</span> { BunGateway } <span class="k">from</span> <span class="s">'bungate'</span>;
 
-<span class="k">const</span> gateway = <span class="k">new</span> <span class="f">Gateway</span>({
-  routes: [{
-    prefix: <span class="s">'/api'</span>,
-    target: <span class="s">'http://localhost:3000'</span>
-  }]
+<span class="k">const</span> gateway = <span class="k">new</span> <span class="f">BunGateway</span>({
+  server: { port: <span class="n">3000</span> },
+  metrics: { enabled: <span class="k">true</span> },
+});
+
+gateway.<span class="f">addRoute</span>({
+  pattern: <span class="s">'/api/*'</span>,
+  loadBalancer: {
+    strategy: <span class="s">'least-connections'</span>,
+    targets: [
+      { url: <span class="s">'http://api1.example.com'</span> },
+      { url: <span class="s">'http://api2.example.com'</span> },
+      { url: <span class="s">'http://api3.example.com'</span> },
+    ],
+    healthCheck: { enabled: <span class="k">true</span>, interval: <span class="n">30000</span>, path: <span class="s">'/health'</span> },
+  },
 });
 
-gateway.<span class="f">start</span>(<span class="n">8080</span>);</code></pre>
+<span class="k">await</span> gateway.<span class="f">listen</span>();
+<span class="k">console</span>.<span class="f">log</span>(<span class="s">'🚀 Bungate running on http://localhost:3000'</span>);
+</code></pre>
               </div>
             </article>
 

script.js

@@ -285,7 +285,18 @@ document.addEventListener("DOMContentLoaded", () => {
       const dynamicGap = gap;
       const totalSlidesDynamic = Math.ceil(cards.length / cardsPerView);
       const offsetPx = currentSlide * cardsPerView * (dynamicCardWidth + dynamicGap);
-      carousel.style.transform = `translateX(-${offsetPx}px)`;
+      // On mobile (single card view), scroll the container; on desktop use transform
+      if (window.innerWidth <= 768) {
+        const cardScrollPosition = currentSlide * dynamicCardWidth;
+        try {
+          carouselContainer.scrollTo({ left: cardScrollPosition, behavior: "smooth" });
+        } catch (e) {
+          carouselContainer.scrollLeft = cardScrollPosition;
+        }
+        carousel.style.transform = "";
+      } else {
+        carousel.style.transform = `translateX(-${offsetPx}px)`;
+      }
 
       // Update dots
       document.querySelectorAll(".carousel-dot").forEach((dot, index) => {
@@ -317,17 +328,13 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     prevBtn.addEventListener("click", () => {
-      if (currentSlide > 0) {
-        currentSlide--;
-        updateCarousel();
-      }
+      currentSlide = Math.max(0, currentSlide - 1);
+      updateCarousel();
     });
 
     nextBtn.addEventListener("click", () => {
-      if (currentSlide < totalSlides - 1) {
-        currentSlide++;
-        updateCarousel();
-      }
+      currentSlide = currentSlide + 1;
+      updateCarousel();
     });
 
     // Handle window resize
@@ -340,6 +347,25 @@ document.addEventListener("DOMContentLoaded", () => {
       }, 250);
     });
 
+    // Sync current slide when user scrolls the container (mobile touch scrolling)
+    if (window.innerWidth <= 768) {
+      let scrollTimeout;
+      carouselContainer.addEventListener("scroll", () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          const dynamicCardWidth = cards[0] && cards[0].offsetWidth ? cards[0].offsetWidth : cardWidth;
+          const scrolled = Math.round(carouselContainer.scrollLeft / dynamicCardWidth);
+          if (scrolled !== currentSlide && scrolled < cards.length) {
+            currentSlide = scrolled;
+            // Update dots only, don't trigger updateCarousel to avoid loop
+            document.querySelectorAll(".carousel-dot").forEach((dot, index) => {
+              dot.classList.toggle("active", index === currentSlide);
+            });
+          }
+        }, 150);
+      });
+    }
+
     updateCarousel();
     console.log(`Carousel initialized. cards=${cards.length}`, { cardsPerView, totalSlides });
   }

styles.css

@@ -296,6 +296,13 @@ ul {
   gap: 16px;
 }
 
+@media (max-width: 768px) {
+  .carousel-wrapper {
+    position: relative;
+    display: block;
+  }
+}
+
 .carousel-container {
   flex: 1;
   overflow: hidden;
@@ -752,17 +759,45 @@ ul {
   }
 
   .carousel-btn {
-    display: none;
+    display: flex;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    box-shadow: var(--shadow-lg);
+    z-index: 20;
+  }
+
+  .carousel-prev {
+    left: 8px;
+  }
+
+  .carousel-next {
+    right: 8px;
   }
 
   .carousel-container {
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .carousel-container::-webkit-scrollbar {
+    display: none;
   }
 
   .carousel-track {
-    scroll-snap-align: start;
+    display: flex;
+    gap: 16px;
+    padding: 0 16px;
+  }
+
+  .carousel-track .blog-card {
+    flex: 0 0 calc(100% - 32px);
+    scroll-snap-align: center;
   }
 
   .blog-carousel {
@@ -779,4 +814,9 @@ ul {
     flex-direction: column;
     gap: 12px;
   }
+  .carousel-dot {
+    min-width: 24px;
+    min-height: 24px;
+    padding: 4px;
+  }
 }