Multi slideshow for listings not working properly

Question

The first two listings work perfectly, especially if I remove the third and fourth from the code. The third listing doesn't show any images where it should, and the fourth shows all the images at once, until you click the next button, then they all disappear also.

Image of the webpage:

This is my main element that contains the listings


    Latest Listings
    
        
            
                1 / 3
                
            

            
                2 / 3
                
            

            
                3 / 3
                
            

            
            

            $608 / 3br - Townhouse
        
        
            
                1 / 5
                
            

            
                2 / 5
                
            

            
                3 / 5
                
            

            
                4 / 5
                
            

            
                5 / 5
                
            

            
            

            $685 / Fully Furnished, Beautiful 1-Bedroom Apt.
        

        
            
                1 / 6
                
            

            
                2 / 6
                
            

            
                3 / 6
                
            

            
                4 / 6
                
            

            
                5 / 6
                
            

            
                6 / 6
                
            

            
            

            $1,000 / 2 Bedroom, 2 Bath Apartment DUPLEX
        
        
        
        
            
                1 / 5
                
            

            
                2 / 5
                
            

            
                3 / 5
                
            

            
                4 / 5
                
            

            
                5 / 5
                
            

            
            

            $700 / Remodeled 2BR 1 BA with large yard

Below is the javascript I used to cycle through the images in each slideshow

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4"];
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
showDivs(1, 3);

function plusDivs(n, no) {
    showDivs(slideIndex[no] += n, no);
}

function showDivs(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";  
}

This is the CSS being used:

main img {
  vertical-align: middle;
  height: 250px;
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.main-gallery {
  width: 120%;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  padding: 10px;
  margin: 0 auto;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  width: 20%;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 10px 10px 15px #555;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

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

/* 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.3);
}

.prev:focus,
.next:focus {
  outline: none;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #FFFFFF;
  padding: 2px 16px;
  border-radius: 10px;
  color: #000000;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

I am not sure what I did to make it not work, and I have spent days trying to find the mistake. That is why I am hoping someone can point out my error. Let me know if you need any other information to help.

54ka · Accepted Answer

The code you wrote requires you to add a new value of "1" to the "slideIndex" array for each slideshow

Replace

var slideIndex = [1, 1]

with this:

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

Multi slideshow for listings not working properly

Answers (1)

Related Questions