Multiple Slideshows not working (javascript)

Question

Introduction

I have 2 simple slideshows on a single page. Only one works. Please help.

I did research on how to develop a simple sideshow and it worked at first

But then i added another slideshow and it went out of wacko

My Code

//slideshow-pokeballs.js

var images = ["https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Great-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Ultra-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Master-Ball.png"];

var imageNumber = 0;
var imageLength = images.length - 1;

function changeBall(x) {
 
 imageNumber += x;
 
 document.getElementById("pokeballs").src = images[imageNumber];
 
 return false;
 
}

//slideshow-pokemon.js

var imageNumber = 0;
var imageLength = images.length - 1;

var images = ["https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757", "https://vignette.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest/scale-to-width-down/200?cb=20140724195345", "https://vignette.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest/scale-to-width-down/200?cb=20140328191525"];

function changeMon(x) {
 
 imageNumber += x;
 
 document.getElementById("pokemon").src = images[imageNumber];
 
 return false;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
 
<body>
 
 <div>
  
  <img src="https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png" id="pokeballs" />
  <br>

  <a href="#" onclick="changeBall(-1); return false;">Previous Slide</a>
  <a href="#" onclick="changeBall(1); return false;">Next Slide</a>

  <script src="js/slideshow-pokeballs.js"></script>
 
 </div>
 
 <br>
 
 <div>
  
  
  <img src="https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757" id="pokemon" />
  <br>
 
  <a href="#" onclick="changeMon(-1); return false;">Previous Slide</a>
  <a href="#" onclick="changeMon(1); return false;">Next Slide</a>
 
  <script src="js/slideshow-pokemon.js"></script>
 
 
 </div>
 
</body>

What i would like

1)I would like to know how to make both slideshows work on the same page and possibly add more slideshows to the page.

2)I hope that the solution i have is a simple change, i don't want to go off-course with the original idea that i had here.

if i understood your question read this link: https://www.w3schools.com/howto/howto_js_slideshow.asp How to create slide show and this post... https://stackoverflow.com/questions/11479234/multiple-slideshows-on-the-same-page Hope this helps — Ferdinando, Nov 08 '18 at 18:18
Thank you @Ferdinando , the first link might just be what i am looking for. I found this thread https://stackoverflow.com/questions/41541559/multiple-slideshows-on-one-page-makes-the-first-one-not-work-anymore - trying to apply this code — Richard Dean Shaun Potgieter, Nov 08 '18 at 18:55

score 0 · Answer 1 · answered Nov 09 '18 at 18:01

Here an example with two slide show in the same page. In this example the time is 2 second foreach slide and they use the same function. In my code i created img folder and put into folder 3 images (img1.jpg,img2.jpg and img3.jpg). I added tag to underline the first block and second block of slides. You can copy and paste this code to try. I tryed the code in firfox and chrome and it works.

before trying the code as it is written, you have to create the folder img and call the images img1.jpg and so on...

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Slides show in the same page -->
<style>
.mySlides1 {display:none;}
.mySlides2 {display:none;}
</style>
<body>
<h2>first block slides</h2>
<div style="max-width:400px">
  <img class="mySlides1" src="img\img1.jpg" style="width:100%">
  <img class="mySlides1" src="img\img2.jpg" style="width:100%">
  <img class="mySlides1" src="img\img3.jpg" style="width:100%">
</div>
<h2>second block slides</h2>
<div style="max-width:400px">
  <img class="mySlides2" src="img\img3.jpg" style="width:100%">
  <img class="mySlides2" src="img\img1.jpg" style="width:100%">
  <img class="mySlides2" src="img\img2.jpg" style="width:100%">
</div>

<script>
var slideIndexX = 0;
var slideIndexY = 0;
carousel();

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

    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndexX++;
    if (slideIndexX > x.length) {slideIndexX = 1}
    x[slideIndexX-1].style.display = "block";

    for (j = 0; j < y.length; j++) {
      y[j].style.display = "none";
    }
    slideIndexY++;
    if (slideIndexY > y.length) {slideIndexY = 1}
    y[slideIndexY-1].style.display = "block";

    setTimeout(carousel, 2000);
}
</script>

</body>
</html>

Hope this helps.

You are welcome...for other users...if you vote up the answer...thanks — Ferdinando, Nov 21 '18 at 16:00

Multiple Slideshows not working (javascript)

1 Answers1