Multiple slideshows on one page makes the first one not work anymore

Question

First of all I know this question\'s been asked before the answer wasn\'t solving my problem so I\'d like to ask it again : I used a Slideshow code from \"W3school\" wich pr

Answer 1

Problem is solved here through an array and index-manipulation

array should be sized on the amount of slideshows

var slideIndex = new Array(2);
slideIndex[0]=1;
slideIndex[1]=1;

showSlides(1, 0);  
showSlides(1, 1);


function plusSlides(n, slideshownumber) 
{
  slideIndex[slideshownumber] = slideIndex[slideshownumber] + n; 
  showSlides( slideIndex[slideshownumber], slideshownumber );
}

function currentSlide(n, slideshownumber) 
{
  slideIndex[slideshownumber] = n;
  showSlides(slideIndex[slideshownumber], slideshownumber);
}

function showSlides(n, slideshownumber) 
{
  var i;

Building name here on 'slider' + slideshownumer, 0 based count (important)

  var slideshowname = "slider" + slideshownumber;
  var slides = document.getElementsByName(slideshowname);

Building name here on 'dot' + slideshownumer, 0 based count (important)

  var dotname = "dot" + slideshownumber;
  var dots = document.getElementsByName(dotname);

  if (n > slides.length) 
  {
      slideIndex[slideshownumber] = 1;
  }

  if (n < 1) 
  {
      slideIndex[slideshownumber] = slides.length;
  }

  for (i = 0; i < slides.length; i++) 
  {
      slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex[slideshownumber]-1].style.display = "block";
  dots[slideIndex[slideshownumber]-1].className += " active";
} 

example of a slideshow, dot and slider name should progress to slider1, slider2, ...

<div class="slideshow-container">
  <div class="mySlides fade" name="slider0">
    <div class="numbertext">1 / 2</div>
    <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  </div>
  <div class="mySlides fade" name="slider0">
    <div class="numbertext">2 / 2</div>
    <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
  </div>

plusSlides(-1 for back, slideshow 0) plusSlides(1 for forward, slideshow 0)

  <a class="prev" onclick="plusSlides(-1,0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1,0)">&#10095;</a>
</div>

initializing

<script> currentSlide(1,0)</script>

function currentSlide(slidenumber, slideshownumber) for both dots and previous / next buttons !

<div style="text-align:center">
 <span class="dot" name="dot0" onclick="currentSlide(1,0)"></span>
 <span class="dot" name="dot0" onclick="currentSlide(2,0)"></span>
</div>

Next slider named slider1

<div class="slideshow-container">
  <div class="mySlides fade" name="slider1">
    <div class="numbertext">1 / 2</div>
    <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  </div>
  <div class="mySlides fade" name="slider1">
    <div class="numbertext">2 / 2</div>
    <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  </div>

Arguments changed for slider1 now

  <a class="prev" onclick="plusSlides(-1,1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1,1)">&#10095;</a>
</div>

<script> currentSlide(1,1)</script>

<div style="text-align:center">
 <span class="dot" name="dot1" onclick="currentSlide(1,1)"></span>
 <span class="dot" name="dot1" onclick="currentSlide(2,1)"></span>
</div>

Answer 2

Main problem in their code is that it is made, well... for one slideshow, and when you try to apply it to multiple slideshows, some serious problems arise, as you have experienced. They used global vars (index, n), which is not problem when you have one slideshow, but with more slideshows - hard to handle stuff, and it is hard to get reference to current slideshow div with existing concept.

And, yes, this is plain javascript slideshow, NO jQuery here. I've changed slightly your HTML and CSS (dots div is INSIDE slideshow div, just for easier targetting), also, i've removed inline event handlers, just to make things little easier and cleaner.

This could be solved on many ways, i've choosed this one:

(function() {

  init(); //on page load - show first slide, hidethe rest

  function init() {

    parents = document.getElementsByClassName('slideshow-container');

    for (j = 0; j < parents.length; j++) {
      var slides = parents[j].getElementsByClassName("mySlides");
      var dots = parents[j].getElementsByClassName("dot");
      slides[0].classList.add('active-slide');
      dots[0].classList.add('active');
    }
  }

  dots = document.getElementsByClassName('dot'); //dots functionality

  for (i = 0; i < dots.length; i++) {

    dots[i].onclick = function() {

      slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

      for (j = 0; j < this.parentNode.children.length; j++) {
        this.parentNode.children[j].classList.remove('active');
        slides[j].classList.remove('active-slide');
        if (this.parentNode.children[j] == this) {
          index = j;
        }
      }
      this.classList.add('active');
      slides[index].classList.add('active-slide');

    }
  }
//prev/next functionality
  links = document.querySelectorAll('.slideshow-container a');

  for (i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      current = this.parentNode;

      var slides = current.getElementsByClassName("mySlides");
      var dots = current.getElementsByClassName("dot");
      curr_slide = current.getElementsByClassName('active-slide')[0];
      curr_dot = current.getElementsByClassName('active')[0];
      curr_slide.classList.remove('active-slide');
      curr_dot.classList.remove('active');
      if (this.className == 'next') {

        if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
          curr_slide.nextElementSibling.classList.add('active-slide');
          curr_dot.nextElementSibling.classList.add('active');
        } else {
          slides[0].classList.add('active-slide');
          dots[0].classList.add('active');
        }

      }

      if (this.className == 'prev') {

        if (curr_slide.previousElementSibling) {
          curr_slide.previousElementSibling.classList.add('active-slide');
          curr_dot.previousElementSibling.classList.add('active');
        } else {
          slides[slides.length - 1].classList.add('active-slide');
          dots[slides.length - 1].classList.add('active');
        }

      }

    }

  }
})();

 /* Slideshow container */
 
 
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom:20px;
  width: 100%;
  text-align: center;
}
.mySlides {
  display:none;
}
.active-slide {
  display:block;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 4</div>
    <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 4</div>
    <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 4</div>
    <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  
    <div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="http://placehold.it/1000x350" style="width:100%">
    <div class="text">Caption Four</div>
  </div>

  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot" ></span>
  <span class="dot" ></span>
   <span class="dot"></span>
</div>
</div>
<br>








<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" >&#10094;</a>
  <a class="next">&#10095;</a>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>  
</div>


<br>

So, this should work if you keep current HTML structure of slideshow divs, and you can have unlimited numbes of independent slideshows. This is pretty old-fashioned js, and it should be clear, if something's not clear, i can explain more...or try to explain better. :)

Answer 3

I've created a solution here:

var sliderObjects = [];
createSliderObjects();

function plusDivs(obj, n) {
  var parentDiv = $(obj).parent();
  var matchedDiv;
  $.each(sliderObjects, function(i, item) {
    if ($(parentDiv[0]).attr('id') == $(item).attr('id')) {
      matchedDiv = item;
      return false;
    }
  });
  matchedDiv.slideIndex=matchedDiv.slideIndex+n;
  showDivs(matchedDiv, matchedDiv.slideIndex);
}

function createSliderObjects() {
  var sliderDivs = $('.slider');
  $.each(sliderDivs, function(i, item) {
    var obj = {};
    obj.id = $(item).attr('id');
    obj.divContent = item;
    obj.slideIndex = 1;
    obj.slideContents = $(item).find('.mySlides');
    showDivs(obj, 1);
    sliderObjects.push(obj);
  });
}

function showDivs(divObject, n) {
  debugger;
  var i;
  if (n > divObject.slideContents.length) {
    divObject.slideIndex = 1
  }
  if (n < 1) {
    divObject.slideIndex = divObject.slideContents.length
  }
  for (i = 0; i < divObject.slideContents.length; i++) {
    divObject.slideContents[i].style.display = "none";
  }
  divObject.slideContents[divObject.slideIndex - 1].style.display = "block";
}

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container slider" id="div1">
  <img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">

  <a class="w3-btn-floating w3-display-left" onclick="plusDivs(this,-1)">&#10094;</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this,1)">&#10095;</a>
</div>

<div class="w3-content w3-display-container slider" id="div2">
  <img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">

  <a class="w3-btn-floating w3-display-left" onclick="plusDivs(this, -1)">&#10094;</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this, 1)">&#10095;</a>
</div>

you can now add as many divs for sliders with 'slider' class and a unique id.