Finished javascript slider

Author: OxIyke

slider/index.css

@@ -9,13 +9,43 @@
     width: 100%;
     display: none;
     transition: ease 1s;
+    height: 1700px;
+
 }
 
-button {
+.slider button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     font-size: 5rem;
+    padding: 25px;
+    margin: 10px;
+    background-color: hsla(0, 0%, 0%, 0.466);
+    color: white;
     border: none;
+    cursor: pointer;
+}
+
+.prev {
+    left: 0;
+}
+
+.next {
+    right: 0;
 }
 
 img.displaySlide {
     display: block;
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@keyframes fade {
+    from {
+        opacity: .5;
+    }
+
+    to {
+        opacity: 1;
+    }
 }

slider/index.html

@@ -15,9 +15,9 @@
             <img class="slide" src="./img-2.jpg">
             <img class="slide" src="./img-3.jpg">
         </div>
+        <button class="prev" onclick="prevSlide()">&#10094</button>
+        <button class="next" onclick="nextSlide()">&#10095</button>
     </div>
-    <button class="prev" onclick="prevSlide()">&#10094</button>
-    <button class="next" onclick="nextSlide()">&#10095</button>
     <script src="./index.js"></script>
 </body>
 

slider/index.js

@@ -1,6 +1,7 @@
 const slides = document.querySelectorAll(".slide");
 let slideIndex = 0;
 let intervalId = null;
+console.log(slideIndex)
 
 document.addEventListener("DOMContentLoaded", initializeSlider)
 
@@ -27,6 +28,10 @@ function showSlide(index) {
 }
 
 function prevSlide() {
+    clearInterval(intervalId);
+    slideIndex++;
+    console.log(slideIndex)
+    showSlide(slideIndex);
 
 }