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

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 2</div>
    <img src="fb1.jpg" alt="Image">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="fb2.jpg">
  </div>
</div>

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

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 2</div>
    <img src="auto1.jpg" alt="Image">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">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

biberman · Accepted Answer · 2022-06-29 08:21:28Z

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 class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades active">
    <div class="numbertext">1 / 2</div>
    <img src="fb1.jpg" alt="Image 1">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="fb2.jpg" alt="Image 2">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 2</div>
    <img src="auto1.jpg" alt="Image 3">
  </div>

  <div class="mySlides fades active">
    <div class="numbertext">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 class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades active">
    <div class="numbertext">1 / 1</div>
    <img src="test1.jpg" alt="Image 0">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades active">
    <div class="numbertext">1 / 2</div>
    <img src="fb1.jpg" alt="Image 1">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="fb2.jpg" alt="Image 2">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 3</div>
    <img src="auto1.jpg" alt="Image 3">
  </div>

  <div class="mySlides fades active">
    <div class="numbertext">2 / 3</div>
    <img src="auto2.jpg" alt="Image 4">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">3 / 3</div>
    <img src="auto3.jpg" alt="Image 5">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 4</div>
    <img src="house1.jpg" alt="Image 6">
  </div>

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

  <div class="mySlides fades active">
    <div class="numbertext">3 / 4</div>
    <img src="house3.jpg" alt="Image 8">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">4 / 4</div>
    <img src="house4.jpg" alt="Image 9">
  </div>
</div>

I think, you meant sLiders, and yes, you can. I added a second example to show this, with a third slideshow-container. Additionally i added more slides (different number of slides per container)...
and i guess if i keep only 1 image in any slider, it wont work,it doesnt show and its affecting the other sliders

Collectives™ on Stack Overflow

javascript slider error while using multiple slides in html

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related