javascript - Multiple slideshows on one page makes the first one not work anymore - Stack Overflow

admin管理员组

文章数量:1290292

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" which provides a nice animated jQuery slideshow. unfortunately, I need more than one on my page and the second one stops the first one from working. Even before finding this solution here, I tried changing the CSS and HTML names of the objects of the different slideshows, which successfully solved part of the problem (the second one was not showing) but as mentioned earlier, stopped the first one from working. The slideshow is here but clicking the arrows won't do anything. I slightly understand what the problem is but can't fix it. Here is how I modified the code for the second one:

var slideIndex = 7;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides2");
    var dots = document.getElementsByClassName("dot2");
    if (n > slides.length) {
        slideIndex = 1
    }    
    if (n < 1) {
        slideIndex = 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(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active2";
}

As you see I just added '2' for every type of objects in both jQuery and CSS. I guess I have to give different names to mands that multiply but how to do it?

EDIT: / Here is a an example in Jsfiddle but I don't understand why here the first one isn't even a slideshow and the second one doesn't work either. It does on my puter however! And I forgot to say on my puter, clicking arrows on the first slideshow changes pictures on the second one! I replaced the pictures with random ones found on the internet.

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" which provides a nice animated jQuery slideshow. unfortunately, I need more than one on my page and the second one stops the first one from working. Even before finding this solution here, I tried changing the CSS and HTML names of the objects of the different slideshows, which successfully solved part of the problem (the second one was not showing) but as mentioned earlier, stopped the first one from working. The slideshow is here but clicking the arrows won't do anything. I slightly understand what the problem is but can't fix it. Here is how I modified the code for the second one:

var slideIndex = 7;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides2");
    var dots = document.getElementsByClassName("dot2");
    if (n > slides.length) {
        slideIndex = 1
    }    
    if (n < 1) {
        slideIndex = 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(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active2";
}

As you see I just added '2' for every type of objects in both jQuery and CSS. I guess I have to give different names to mands that multiply but how to do it?

EDIT: https://jsfiddle/mgb7k239/ Here is a an example in Jsfiddle but I don't understand why here the first one isn't even a slideshow and the second one doesn't work either. It does on my puter however! And I forgot to say on my puter, clicking arrows on the first slideshow changes pictures on the second one! I replaced the pictures with random ones found on the internet.

• javascript
• jquery
• css
• slideshow

Share Improve this question Follow edited Jul 12, 2024 at 17:28 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Jan 9, 2017 at 5:31 François MaletFrançois Malet 9722 gold badges33 silver badges1414 bronze badges 2

• Please post some working fiddle – Sharmila Commented Jan 9, 2017 at 6:06
• Edited question – François Malet Commented Jan 9, 2017 at 7:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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./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./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./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./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./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./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. :)

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./lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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./eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur./xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur./lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur./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./eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur./xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur./lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur./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.

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./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./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./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./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>

本文标签： javascriptMultiple slideshows on one page makes the first one not work anymoreStack Overflow