javascript slider error while using multiple slides in html-CodePudding

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);
}

<div >
  <div >
    <div >1 / 2</div>
    <img src="fb1.jpg" alt="Image">
  </div>

  <div >
    <div >2 / 2</div>
    <img src="fb2.jpg">
  </div>
</div>

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

<div >
  <div >
    <div >1 / 2</div>
    <img src="auto1.jpg" alt="Image">
  </div>

  <div >
    <div >2 / 2</div>
    <img src="auto2.jpg">
  </div>

</div>

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

CodePudding user response：

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;
}

<div >
  <div >
    <div >1 / 2</div>
    <img src="fb1.jpg" alt="Image 1">
  </div>

  <div >
    <div >2 / 2</div>
    <img src="fb2.jpg" alt="Image 2">
  </div>
</div>

<div >
  <div >
    <div >1 / 2</div>
    <img src="auto1.jpg" alt="Image 3">
  </div>

  <div >
    <div >2 / 2</div>
    <img src="auto2.jpg" alt="Image 4">
  </div>
</div>

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;
}

<div >
  <div >
    <div >1 / 1</div>
    <img src="test1.jpg" alt="Image 0">
  </div>
</div>

<div >
  <div >
    <div >1 / 2</div>
    <img src="fb1.jpg" alt="Image 1">
  </div>

  <div >
    <div >2 / 2</div>
    <img src="fb2.jpg" alt="Image 2">
  </div>
</div>

<div >
  <div >
    <div >1 / 3</div>
    <img src="auto1.jpg" alt="Image 3">
  </div>

  <div >
    <div >2 / 3</div>
    <img src="auto2.jpg" alt="Image 4">
  </div>

  <div >
    <div >3 / 3</div>
    <img src="auto3.jpg" alt="Image 5">
  </div>
</div>

<div >
  <div >
    <div >1 / 4</div>
    <img src="house1.jpg" alt="Image 6">
  </div>

  <div >
    <div >2 / 4</div>
    <img src="house2.jpg" alt="Image 7">
  </div>

  <div >
    <div >3 / 4</div>
    <img src="house3.jpg" alt="Image 8">
  </div>

  <div >
    <div >4 / 4</div>
    <img src="house4.jpg" alt="Image 9">
  </div>
</div>