Image slider is only partially working (Vanilla Javascript)

Question

I am working on a javascript image slider and at the moment the buttons go either forward or backward from the first image or index 0.

This means if I start with going backward this is what happens 0-3-2-1-NO IMAGES JUST THE BUTTONS and if it is forward 0-1-2-3-NO IMAGES JUST THE BUTTONS It seems the second iteration/looping is not working for some reason I haven't been able to figure out.

Also, if I start with going forward/backward and try to switch to backward/forward the same problem NO IMAGES JUST THE BUTTONS comes up.

I am not sure these two are related so please help. Here is the javascript

let imgEl = document.querySelectorAll("img");
let backBtnEl = document.querySelector(".back-btn");
let forwardBtnEl = document.querySelector(".forward-btn");
let currentIndex = 0;
let lengthImagesEl=imgEl.length;
function showSlide(currentIndex) {
    return imgEl[currentIndex].classList.add("showing");
}

function nextSlide() {
    imgEl[currentIndex].style.display="none";
    currentIndex = (currentIndex + 1) % lengthImagesEl;
    return showSlide(currentIndex);

}

function previousSlide() {
    imgEl[currentIndex].style.display = "none";
    currentIndex = (currentIndex + lengthImagesEl - 1) % lengthImagesEl;
    return showSlide(currentIndex);
 }

backBtnEl.addEventListener("click", previousSlide);
 
forwardBtnEl.addEventListener("click", nextSlide);

Here is the HTML- only the first image link works(apologies)

<!DOCTYPE html>
    <html>
      <head>
        <title>Slideshow</title>
        
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous"
        />
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <!-- Write your HTML in here -->
        <div class="img-container">
          <img class ="showing" src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8cGFuZGFzfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="panda naps on branch">
          <img src="" alt="panda chilling">
          <img src="" alt="panda snack time">
          <img src="" alt="curious panda">
        </div>
        
        <div class="btn-container">
          <button class="back-btn">Back</button>
          <button class="forward-btn">Forward</button>
        </div>
       
        <script src="slideshow.js"></script>
      </body>
    </html>

Here is the CSS

img{
    width:100%;
    height:550px;
    margin:5px;
    display:none;
}
.showing {
    display:block;
}

button {
    display:inline-flex;
    height: 30px;
    background-color:orange;
   }

Answer 1

FIXED It seems once the display is none there was no way it was going back to "showing" so I added one line of code and it worked imgEl[currentIndex].classList.toggle("showing"); instead of imgEl[currentIndex].style.display = "none";

Image slider is only partially working (Vanilla Javascript)

Question

1 answers

solution1
0 2021-03-18 09:48:02

Image slider is only partially working (Vanilla Javascript)

Question

1 answers

solution1 0 2021-03-18 09:48:02

solution1
0 2021-03-18 09:48:02