Multiple slideshows not working (html, css, js)

Question

I'm supposed to have 4 different sliders with 3 different picture on each slider. I use W3school's slideshow (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple) to get the first two (which is working fine!) but when i tried to add 2 more the pictures won't show.

JS:

showSlides(1, 0);  <-- this was from W3
showSlides(1, 1);  <-- this was from W3
showSlides(1, 2);  <-- I added this
showSlides(1, 3);  <-- I added this

does someone know how to fix this problem?

Here is the one from W3Schools:

And this is mine:

var slideIndex = [1, 1];
var slideId = ["grantoppen-slide", "granbo-slide", "granstua-slide", "granhaug-slide"];
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);

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

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

James D · Accepted Answer

Edit:

Solution 1: the proper way would be to actually add 2 values to 'slideIndex':

var slideIndex = [1, 1, 1, 1];

Instead of:

var slideIndex = [1, 1];

And that is it. This fixes the issue of the last line going out of index with new slides.

Solution 2: If you plan to change number of slides often and to automate it, you can populate the array for each index slide when page loads with an additional initiaaliseSlides() function:

var slideIndex = []; // This will be automatically populated
var slideId = ["grantoppen-slide", "granbo-slide", "granstua-slide", "granhaug-slide"];
initialiseSlides();
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2); // Note that this is set to 1 now
showSlides(1, 3);

// Initalise all starting slide indexes
function initialiseSlides(){
   for (var i = 0; i < slideId.length; i++){
      slideIndex[i] = 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"; 
}

Solution 3: Or the showSlides() can be fixed up to correct itself like this, without using initialiseSlides(). Note the 4th line:

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (typeof slideIndex[no] === 'undefined') {slideIndex[no] = 1;}
  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"; 
}

Multiple slideshows not working (html, css, js)

Answers (2)

Related Questions