Grace Read Grace Read - 29 days ago 16
HTML Question

Slideshow not working

(Sorry if this question has rlly simple answer!!). Anyways I'm trying to make two slideshows on the one page. Only one ever shows though. As in although I've added all the code for the second one, only the first one is visible on the page.

I'm only allowed to keep the code basic, but can do whatever with the javascript if that's what is the problem.

The javascript. I'm not sure what it means (sorry again) but it works for the one banner

<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) -->
<script>
var myIndex = 0;
carousel();



function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 1000); <!-- time between slide change -->

}
</script>


The html code - for the second slideshow I copied the code between those two 'slideshow' notes into a different div (and changed the picture filenames)

<!--slideshow-->
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<!--END slideshow-->


This is the css (just the relevant container
specifications).

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

.mySlides {
position: relative;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
width: 500px;
margin: auto;
border-radius: 25px;
}


Thank you in advance!!

Answer

If you copied the div with the same elements, and left the class names alone, then it makes sense that only one slideshow appears - but it should be a slideshow playing both sets of images (or duplicates, if the sets are the same). It's a somewhat simple fix. First, rename the class for the second set of images, so your HTML would be something like:

<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>

<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>

Then you can basically double the code needed for one slideshow, and set it to use the class for the second set of images. Might be tough to picture in your head, but you may be able to see it here:

var xIndex = 0, yIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var y = document.getElementsByClassName("mySlides2");

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

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

  xIndex++;
  if (xIndex > x.length) {xIndex = 1}    
  x[xIndex-1].style.display = "block";  

  yIndex++;
  if(yIndex > y.length) {yIndex = 1}
  y[yIndex-1].style.display = "block";

  setTimeout(carousel, 1000);
}

You can see I created a yIndex variable, and used y for .mySlides2 elements (instead of mySlides). I doubled the loop specifically for y instead of x, and incremented the yIndex in the same fashion as xIndex (same with setting it to one if it exceeds max number of images, and setting the next image to be displayed).

Here's a working Fiddle (well, working in a sense, the images are all broken, but the script works): https://jsfiddle.net/cchvncnd/