📱 better featured slider responsive

Author: LoupesDEV

css/components.css

@@ -601,32 +601,36 @@
 }
 
 .slider-track {
-  display: flex;
+  position: relative;
   width: 100%;
-  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
+  height: 320px;
 }
 
 .slider-card.featured {
-  min-width: 100%;
-  max-width: 900px;
-  margin: 0 48px;
-  box-shadow: var(--shadow-accent);
-  border-radius: var(--border-radius-large);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-card);
-  position: relative;
-  cursor: pointer;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: scale(0.98);
+  transition: opacity 0.35s ease, transform 0.35s ease;
+}
+
+.slider-card.featured.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: scale(1);
+  z-index: 2;
 }
 
 .slider-card.featured img,
 .slider-img {
+  display: block;
   width: 100%;
   height: 320px;
   object-fit: cover;
-  image-rendering: auto;
-  filter: none;
 }
 
 .slider-overlay {

css/responsive.css

@@ -68,6 +68,10 @@
   .slider-dots {
     gap: 1rem;
   }
+
+  .slider-track {
+    height: 220px;
+  }
 }
 
 @media (max-width: 600px) {
@@ -113,6 +117,10 @@
     margin-top: 0.7rem;
     gap: 0.7rem;
   }
+
+  .slider-track {
+    height: 120px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -172,4 +180,8 @@
     margin-top: 0.4rem;
     gap: 0.4rem;
   }
+
+  .slider-track {
+    height: 80px;
+  }
 }

js/display.js

@@ -199,38 +199,46 @@ function renderFeaturedSlider() {
 
   function render() {
     slider.innerHTML = `
-            <div class="slider-wrapper">
-                <div class="slider-track">
-                    ${featuredItems
-                      .map(
-                        (item, idx) => `
-                        <div class="slider-card featured" data-idx="${idx}" style="cursor:pointer;">
-                            <img src="${item.banner}" alt="${item.title}" class="slider-img">
-                            <div class="slider-overlay">
-                                <div class="slider-card-title">${item.title}</div>
-                                <div class="slider-card-desc">${item.description}</div>
-                            </div>
-                        </div>
-                    `
-                      )
-                      .join("")}
+      <div class="slider-wrapper">
+        <div class="slider-track">
+          ${featuredItems
+            .map(
+              (item, idx) => `
+              <div class="slider-card featured ${
+                idx === currentIndex ? "active" : ""
+              }"
+                   data-idx="${idx}" style="cursor:pointer;" aria-hidden="${
+                idx === currentIndex ? "false" : "true"
+              }">
+                <img src="${item.banner}" alt="${
+                item.title
+              }" class="slider-img">
+                <div class="slider-overlay">
+                  <div class="slider-card-title">${item.title}</div>
+                  <div class="slider-card-desc">${item.description}</div>
                 </div>
-                <div class="slider-dots">
-                    ${featuredItems
-                      .map(
-                        (_, dotIdx) => `
-                        <span class="slider-dot${
-                          dotIdx === currentIndex ? " active" : ""
-                        }" data-idx="${dotIdx}"></span>
-                    `
-                      )
-                      .join("")}
-                </div>
-            </div>
-        `;
+              </div>
+            `
+            )
+            .join("")}
+        </div>
+        <div class="slider-dots">
+          ${featuredItems
+            .map(
+              (_, dotIdx) => `
+                <span class="slider-dot${
+                  dotIdx === currentIndex ? " active" : ""
+                }" data-idx="${dotIdx}"></span>
+              `
+            )
+            .join("")}
+        </div>
+      </div>
+    `;
 
-    const track = slider.querySelector(".slider-track");
-    track.style.transform = `translateX(-${currentIndex * 100}%)`;
+    // No horizontal translate needed anymore
+    // const track = slider.querySelector(".slider-track");
+    // track.style.transform = `translateX(-${currentIndex * 100}%)`;
 
     slider.querySelectorAll(".slider-card.featured").forEach((card) => {
       card.onclick = () => {