adding an arrow in testimonial slider

jephlandicho · jephlandicho · commit 513bc0ece35b · 2024-04-04T08:32:04.000Z
diff --git a/projects/testimonial-slider/index.html b/projects/testimonial-slider/index.html
@@ -9,6 +9,7 @@
   </head>
   <body>
     <div class="testimonial-container">
+      <button class="arrow prev" onclick="prevTestimonial()">&#10094;</button>
       <img
         src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80"
         alt="user-image"
@@ -18,6 +19,7 @@
         best. Not able to tell you how happy I am with Apple.
       </p>
       <h4 class="username">Cherise G</h4>
+      <button class="arrow next" onclick="nextTestimonial()">&#10095;</button>
     </div>
     <script src="index.js"></script>
   </body>
diff --git a/projects/testimonial-slider/index.js b/projects/testimonial-slider/index.js
@@ -32,11 +32,20 @@ function updateTestimonial() {
   imgEl.src = photoUrl;
   textEl.innerText = text;
   usernameEl.innerText = name;
+}
+
+function nextTestimonial() {
   idx++;
-  if (idx === testimonials.length) {
+  if (idx >= testimonials.length) {
     idx = 0;
   }
-  setTimeout(() => {
-    updateTestimonial();
-  }, 10000);
+  updateTestimonial();
+}
+
+function prevTestimonial() {
+  idx--;
+  if (idx < 0) {
+    idx = testimonials.length - 1;
+  }
+  updateTestimonial();
 }
diff --git a/projects/testimonial-slider/style.css b/projects/testimonial-slider/style.css
@@ -8,6 +8,7 @@ body {
 }
 
 .testimonial-container {
+  position: relative;
   width: 500px;
   height: 100px;
   background-color: slateblue;
@@ -17,7 +18,6 @@ body {
   padding: 70px 20px;
   margin: 5px;
   color: white;
-  position: relative;
 }
 
 img {
@@ -34,3 +34,23 @@ img {
   font-size: 13px;
   font-weight: 100;
 }
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  margin: 70px;
+}
+
+.arrow.prev {
+  left: 10px;
+}
+
+.arrow.next {
+  right: 10px;
+}
