15 - Slider JS - Slides Approach

Author: pktcodes

15-slider/setup/app.js

@@ -5,3 +5,27 @@ const nextBtn = document.querySelector(".nextBtn");
 slides.forEach(function (slide, index) {
   slide.style.left = `${index * 100}% `;
 });
+
+let counter = 0;
+
+nextBtn.addEventListener("click", function () {
+  counter++;
+  carousel();
+});
+
+prevBtn.addEventListener("click", function () {
+  counter--;
+  carousel();
+});
+
+function carousel() {
+  if (counter > slides.length - 1) {
+    counter = 0;
+  }
+  if (counter < 0) {
+    counter = slides.length - 1;
+  }
+  slides.forEach(function (slide) {
+    slide.style.transform = `translateX(-${counter * 100}%)`;
+  });
+}

15-slider/setup/styles.css

@@ -189,7 +189,7 @@ Slider
   max-width: 80rem;
   position: relative;
   border-radius: 0.5rem;
-  /* overflow: hidden; */
+  overflow: hidden;
   margin-top: 4rem;
 }
 .slide {