15-button option added to the slider

john-smilga · john-smilga · commit c46832b1689f · 2020-04-27T08:15:39.000-07:00
diff --git a/15-slider/final/app.js b/15-slider/final/app.js
@@ -16,13 +16,30 @@ prevBtn.addEventListener("click", function () {
 });
 
 function carousel() {
-  if (counter === slides.length) {
+  // working with slides
+  // if (counter === slides.length) {
+  //   counter = 0;
+  // }
+  // if (counter < 0) {
+  //   counter = slides.length - 1;
+  // }
+  // working with buttons
+  if (counter < 0) {
     counter = 0;
   }
-  if (counter < 0) {
-    counter = slides.length - 1;
+  if (counter < slides.length - 1) {
+    nextBtn.style.display = "block";
+  } else {
+    nextBtn.style.display = "none";
+  }
+  if (counter > 0) {
+    prevBtn.style.display = "block";
+  } else {
+    prevBtn.style.display = "none";
   }
   slides.forEach(function (slide) {
     slide.style.transform = `translateX(-${counter * 100}%)`;
   });
 }
+
+prevBtn.style.display = "none";
diff --git a/15-slider/final/styles.css b/15-slider/final/styles.css
@@ -190,7 +190,7 @@ Slider
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
-  margin-top: 10rem;
+  margin-top: 4rem;
 }
 .slide {
   position: absolute;
@@ -212,8 +212,8 @@ Slider
 }
 .person-img {
   border-radius: 50%;
-  width: 5rem;
-  height: 5rem;
+  width: 6rem;
+  height: 6rem;
   margin: 0 auto;
   margin-bottom: 1rem;
 }
@@ -236,7 +236,7 @@ Slider
 .nextBtn {
   background: transparent;
   border-color: transparent;
-  font-size: 1.25rem;
+  font-size: 1.75rem;
   cursor: pointer;
   margin: 0 0.25rem;
   text-transform: capitalize;
diff --git a/15-slider/setup/styles.css b/15-slider/setup/styles.css
@@ -190,7 +190,7 @@ Slider
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
-  margin-top: 10rem;
+  margin-top: 4rem;
 }
 .slide {
   position: absolute;
@@ -212,8 +212,8 @@ Slider
 }
 .person-img {
   border-radius: 50%;
-  width: 5rem;
-  height: 5rem;
+  width: 6rem;
+  height: 6rem;
   margin: 0 auto;
   margin-bottom: 1rem;
 }
@@ -236,7 +236,7 @@ Slider
 .nextBtn {
   background: transparent;
   border-color: transparent;
-  font-size: 1.25rem;
+  font-size: 1.75rem;
   cursor: pointer;
   margin: 0 0.25rem;
   text-transform: capitalize;
