Question

0

315

Views

javascript slider error while using multiple slides in html

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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-29T02:16:36.033Z

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>

0

315

javascript slider error while using multiple slides in html

1 answers

0

Find remote jobs

Andres GPT