javascript slider error while using multiple slides in html

ZNO

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

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Html Range slider with Javascript

How to display multiple thumbnails while uploading images in html using javascript?

get value of slider with (change) of particular slider while using multiple sliders

Loader appears while using the slider revolution

Error while using multiple quotes

'Integer out of range' error while deleting hidden slides

how to reduce slides in mobile using loryjs | Javascript

Buttons in slider not working using javascript

Getting weird error while using html in IOS

while using multiple in getting error in sql

Issue while creating image slider using jquery

Issue while using moving effect on slider

Regex invalid group error while using in javascript

build slider using jquery & javascript

javascript with multiple slides within the same div container

HTML/Javascript range slider

JQuery slider doesn't work fine for next slides ( having error with .next() )

Error while using if statement within for loop in javascript

How do I deal with cloned slides to create a seamless html5 video slider in SlickJS?

Slider slides many times

JavaScript carousel/slider error

Function error with my Solidity map(int,string) while using javascript to return values to html.

error while using a javascript in angular project

Javascript Error : While using array destructuring

How to make card-slider using html,css and javascript

Image Slider using HTML and Javascript

Javascript image slider tutorial: "TypeError: slides is null"

server error while using emotion/styled in javascript

3d carousel slider with 8 slides using html and css (js would be also ok)