creating slideshow and problem with starting from first

Question

I want to create a slideShow and it almost works well but when using the flash to continue to one direction when it comes to end of that direction and starts from the first dot the same flash for that direction doesn't work anymore. would you please let me know what the problem is? here is HTML:

css:

#container {
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 80vh;
    overflow: hidden;
    margin: 0 auto;
}

#dot {
    width: 20%;
    height: 5vh;
    margin: 2vh 0;
    display: flex;
    justify-content: space-around;
    margin: 10vh auto;
}

a {
    width: 2vw;
    height: 2.5vh;
    background-color: #b0b0b0;
    border-radius: 100%;
    transition: background-color .5s ease;
}

.img {
    display: none;
}

a:hover {
    cursor: pointer;
}

#page {
    margin-left: 9%;
    width: 80%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 32vh;
}

span:hover {
    cursor: pointer;
}

span {
    background-color: #1d2129;
    color: aliceblue;
    font-size: larger;
    padding: 2%;
    border-radius: 50%;
}

js:

let index = 0;
slideShow(index);

function plusSlides(n) {
    slideShow(index += n);
};

function currentSlide(n) {
    slideShow(index = n);
};

function slideShow(index) {
    let i;
    let img = document.querySelectorAll("img");
    let dots = document.querySelectorAll(".dots");
    if (index > 3) {
        index = 0;
    }
    if (index < 0) {
        index = 3;
    }
    for (i = 0; i < img.length; i++) {
        img[i].classList.add("img");
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].style.backgroundColor = "#b0b0b0";
    }
    img[index].classList.remove('img');
    dots[index].style.background = "#686868";
};

user_5334486 · Answer

As per my comment, in your your code index is the name of the global variable let index = 0; and the function parameter function slideShow(index) {.

This leads to the confusing problem, when you re-assign index = 0; and index = 3;.

Just rename the parameter to something else (newIndex, in this example), and it will work correctly.

let index = 0;
slideShow(index);

function plusSlides(n) {
  slideShow(index += n);
}

function currentSlide(n) {
  slideShow(index = n);
}


// PARAMETER NAME IS NOW newIndex
function slideShow(newIndex) {
  let i;
  let img = document.querySelectorAll("img");
  let dots = document.querySelectorAll(".dots");
  if (newIndex > 3) {
    index = 0;
  }
  if (newIndex < 0) {
    index = 3;
  }
  for (i = 0; i < img.length; i++) {
    img[i].classList.add("img");
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].style.backgroundColor = "#b0b0b0";
  }

  img[index].classList.remove('img');
  dots[index].style.background = "#686868";
}

#container {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 80vh;
  overflow: hidden;
  margin: 0 auto;
}

#dot {
  width: 20%;
  height: 5vh;
  display: flex;
  justify-content: space-around;
  margin: 10vh auto;
}

a {
  width: 2vw;
  height: 2.5vh;
  background-color: #b0b0b0;
  border-radius: 100%;
  transition: background-color 0.5s ease;
}

.img {
  display: none;
}

a:hover {
  cursor: pointer;
}

#page {
  margin-left: 9%;
  width: 80%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 32vh;
}

span {
  background-color: #1d2129;
  color: aliceblue;
  font-size: larger;
  padding: 2%;
  border-radius: 50%;
}

span:hover {
  cursor: pointer;
}

creating slideshow and problem with starting from first

1 Answers