Adding Multiple Image Slideshows

Question

I have this worksheet to complete and one of the questions is to explain this code and to add one more image slideshow.

I don't really understand the javascript code and a bit confused as to how to add another image slideshow.

I understand the HTML and css but the javascript is confusing. Any help would be appreciated.

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

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

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}

* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

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

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

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

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
  </div>

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

As it is, it is not even creating 1 slide show... please create a minimal reproducible example, or tell the person who asked you to make another slideshow that their slide show doesn't work in the first place lol — T J
– T J, Commented Mar 16, 2021 at 12:59
Both your slide shows are now working (You made it work by calling the showSlides() method with right arguments. Are you still expecting an answer for this question? Which part of the JS you need explanation for? — T J
– T J, Commented Mar 16, 2021 at 13:20
Code is not a dynamic one.. You requirements needs changes in both html and JavaScript. Like create mySlides3 div similar to mySlides1 and mySlides2 and update the slideId array with new value "mySlides3" — Karthikeyan
– Karthikeyan, Commented Mar 16, 2021 at 13:21
Have you tried this: w3schools.com/howto/howto_js_slideshow.asp — Green
– Green, Commented Mar 16, 2021 at 13:48

T J · Accepted Answer · 2021-03-16 14:03:47Z

1

I updated the code using an IDE to be human readable. I believe it is pretty straight forward now. If you don't understand specific parts you can ask me in comments. (This not quality code, I believe it's a learning exercise so I kept it as it is)

var slideIndex = [1, 1, 1];
var slideContainerSelectors = ["mySlides1", "mySlides2", "mySlides3"]

function showSlides(nextslideIndex, slideContainerIndex) {
  var i;
  var slideContainerElement = document.getElementsByClassName(slideContainerSelectors[slideContainerIndex]);
  if (nextslideIndex > slideContainerElement.length) {
    slideIndex[slideContainerIndex] = 1
  }
  if (nextslideIndex < 1) {
    slideIndex[slideContainerIndex] = slideContainerElement.length
  }
  for (i = 0; i < slideContainerElement.length; i++) {
    slideContainerElement[i].style.display = "none";
  }
  slideContainerElement[slideIndex[slideContainerIndex] - 1].style.display = "block";
}

function plusSlides(increment, index) {
  showSlides(slideIndex[index] += increment, index);
  //----------------------------^ slideIndex[index] = slideIndex[index] + increment
}

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

* {
  box-sizing: border-box
}

.mySlides1,
.mySlides2 {
  display: none
}

img {
  vertical-align: middle;
}


/* Slideshow container */

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


/* Next & previous buttons */

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


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a grey background color */

.prev:hover,
.next:hover {
  background-color: #f1f1f1;
  color: black;
}

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
  </div>

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

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides3">
    <img src="https://picsum.photos/200/300" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="https://picsum.photos/id/237/200/300" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="https://picsum.photos/id/238/200/300" style="width:100%">
  </div>

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

edited Mar 16, 2021 at 14:03

answered Mar 16, 2021 at 13:33

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mmigiiueelll Over a year ago

thank you, the javascript makes more sense

mmigiiueelll Over a year ago

but how do i add another image slideshow because I tried adding "mySlides3" (same HTML methods as the other two) to the "slideContainerSelectors" but it doesn't create a new slideshow

T J Over a year ago

I added a 3rd one in the answer, you have to add the HTML, update both arrays and initialize the slider showSlides(1, 2);

mmigiiueelll Over a year ago

ah okay i see what i did wrong, i forgot to add that extra showSlides() line. Thank you very much

Collectives™ on Stack Overflow

Adding Multiple Image Slideshows

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related