javascript slider error while using multiple slides in html

Question

i have a javascript slider in my html website, the code is like below:

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 2000);
}

this is working fine, now i have added another slider in the same page:

now the issue is its kind of colliding, i think because both has same javascript code, both the slide is calculating total images in both the slides and blank images are coming in both, can anyone please tell me how to fix this, thanks in advance

user_15377355 · Answer

First: You call the function showSlides() with a param (slideIndex) that isn't necessary, because the function uses the global declared var.

I recommend, to add or remove a class (for example .active) instead of styling with js. The advantage is, that you can get the index in the function via that class instead of using the global var for that:

const active_slide = document.querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;

With that in use you can loop through the slideshow-containers without getting trouble with the slideIndex.

Working example:

(i removed the functions plusSlides() and currentSlide(), because they aren't used in that example and at least plusSlides() needs another functionality than showSlides())

showSlides();

function showSlides() {
  const containers = document.querySelectorAll('.slideshow-container');
  
  for (let i = 0; i < containers.length; i++) {
    const slides = containers[i].getElementsByClassName("mySlides");
    const active_slide = containers[i].querySelector('.active');
    let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;

    active_slide.classList.remove('active');
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1
    }
    slides[slideIndex - 1].classList.add('active');
  }
  setTimeout(showSlides, 2000);
}

.mySlides {
  display: none;
}

.mySlides.active {
  display: block;
}

Example with more sliders and slides:

showSlides();

function showSlides() {
  const containers = document.querySelectorAll('.slideshow-container');
  
  for (let i = 0; i < containers.length; i++) {
    const slides = containers[i].getElementsByClassName("mySlides");
    const active_slide = containers[i].querySelector('.active');
    let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;

    active_slide.classList.remove('active');
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1
    }
    slides[slideIndex - 1].classList.add('active');
  }
  setTimeout(showSlides, 2000);
}

.mySlides {
  display: none;
}

.mySlides.active {
  display: block;
}

javascript slider error while using multiple slides in html

1 Answers