Skip to content
Advertisement

Multiple Slideshow not working properly. Any Clue?

So basically, I’m trying to create multiple slideshows on the page with dots to switch between the slides (because I’ve already tried the arrow type button and it doesn’t workout for me idk), and the issue is that when I use more than one slideshow the dots on the first one either stop working or begin switching the below slideshows slides.

I have already seen a lot of threads about this issue and tried several answers to them, but none of them seem to work. So if anybody has any clue of what is happening in my code and knows the answer, it would be great. PD: I’m sorry if it contains any grammatic faults :c.

This is the code I’m using (originally from w3s: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_quotes_slideshow and https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple)

/* Referencia miscelánea de assets
color cuadraos: #31572C
color fondo global: #B3B882
color fondo variable: #90A970
color fondo recuadros: #4F772D
color fondo titulo principal&Home: #132A13
color flechas: #000000
*/

* {
  font-family: 'Roboto', sans-serif;
  font-size:large;
}

details {
  border: 1px solid #d4d4d400;    
  margin-top: 10px;
}

summary {   
  font-weight: bold;
  font-size: 120%;
  margin: -.75em -.75em 0;
  padding: .75em;
  background-color:#31572C;
  color: #fff;
}

details[open] {
 padding: 10px;
}

details[open] summary {
  margin-bottom: 10px;
}

#chingue {
text-align: center;
}

/* Cuadrados principales*/
.TituloEleccion {
    color: #ffffff;
    background-color: #31572C;
    text-align: center;
    height: 99%;
    width:100%;
    margin-top:0%;
    line-height: 3.1;
}

body {
    background-color: #B3B882;
}

#titulogeneral {
    color: #ffffff;
    background-color: #132A13;
    border-style: ridge;
    border-color: #4eaa4e;
    margin-left: 20%;
    margin-right: 20%;
    height: 8.5%;
    text-align: center;
    line-height: 4.15;
    white-space: nowrap;
    overflow: hidden;
    white-space: initial;
  }
   
  .colordesconocido {
    background-color: #4F772D;
    width:100%;
    margin-top:0%;
    margin-bottom: 30px;
  }

#fondouniversal {
  background-color:#B3B882 ;
}

.divinformacion {
  width: 50%;
  display: block;
  float: left;
  padding: 20px;
  border: 2px solid rgb(0, 0, 0);
  border-style: double;
  border-radius: 10px;
}

.fondoeleccion {
  color: #000000;
  background-color: #4F772D;
  width:100%;
  margin-top:0%;
  border: 1.5px solid rgb(0, 0, 0);
  border-style: double;
  margin-bottom: 30px;
}

img{
  border:2px solid #000000;
}

body {
  font-family:"Pathway Gothic One", sans-serif;
}


.hidecontent {
  display: none;
}

#myaccordion label {
box-shadow:0 0 20px #d4d4d4;
display: block;    
padding: 8px 22px;
margin: 1px 0px 1px 0px;
cursor: pointer;
background: #31572C;
color: #FFF;
transition: ease .5s;
text-align:center;
}
#myaccordion label:hover {
background: #31572C;
}
.content {
box-shadow:0 0 20px #d4d4d4;
background: #90A970;
padding: 1.5% 1.5%;
border: 1px solid #d4d4d4;
margin: -1 0 0 0;
}

#myaccordion input:checked + label + .content {
display: block;
-moz-animation: fadeIn 0.5s ease-out;
-o-animation: fadeIn 0.5s ease-out;
animation: fadeIn 0.5s ease-out;
}

#info1 {
  float:right;
}

#foto {
  float:left;
}

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}

/* Slideshow container */
.slideshow-container0 {
  position: relative;
  background:#90A970;
}

.slideshow-container1 {
  position: relative;
  background:#90A970;
}

.slideshow-container2 {
  position: relative;
  background:#90A970;
}

/* Slides */
.mySlides0 {
  display: none;
  padding: 2px;
  text-align: center;
}

.mySlides1 {
  display: none;
  padding: 2px;
  text-align: center;
}

.mySlides2 {
  display: none;
  padding: 2px;
  text-align: center;
}


/* The dot/bullet/indicator container */
.dot-container0 {
    text-align: center;
    padding: 20px;
    background:#31572C;
}

.dot-container1 {
  text-align: center;
  padding: 20px;
  background:#31572C;
}

.dot-container2 {
  text-align: center;
  padding: 20px;
  background:#31572C;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot0 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot1 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot2 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

.titulilloparque {
  text-align: center;
  color:#000000;
}
<html>
<head>
<title>PARQUES NATURALES Y NACIONALES. ANDALUCIA</title>
<link rel="stylesheet" href="CSSMAIN.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<a id="inicio"></a>

<body id="fondouniversal">
    <div>
        <p><h1 id="titulogeneral">PARQUES NATURALES Y NACIONALES. ANDALUCIA</h1></p>
     </div>

    <div id="myaccordion">
    <input type="checkbox" id="accordion1" class="hidecontent"/>
    <label for="accordion1"><h2>PARQUES NATURALES</h2></label>
<div class="content hidecontent">

        <div class="fondoeleccion">
            <h3 class="titulilloparque">PARQUE NATURAL DE SIERRA NEVADA</h3>

                <div class="slideshow-container0">

                    <div class="mySlides0 fade">
                        <img src="images/FotoSN1.jpg" style="width:65%" style="height:25%"/>
                        <div>Imagen del parque</div>
                    </div>

                    <div class="mySlides0">
                        <p> <h4>DATOS</h4>
                            GEOLOCALIZACIÓN: 37°05'19.8''N 3°10'18.7''O <br/>
                    
                            Hotel, casa rural y cabaña.<br/>
                            
                            Senderismo, alpinismo, rutas en bicicleta, esquí, snowboard, 
                            clases de esquí y snowboard guiadas<br/>
                    
                            Jabalí, gato montés, zorro, comadreja, garduña, gineta, 
                            y el frecuente turón común <br/>
                        </p>
                    </div>
                    
                    <div class="mySlides0">
                        <p> <h4>TURISMO</h4>
                            TOTAL<br/>
                            VIAJEROS 3712<br/>
                            PERNOCTACIONES 8430<br/>
                            EST. MEDIA 2,27 d<br/><br/>

                            ESPAÑOLES<br/>
                            VIAJEROS 2235<br/>
                            PERNOCTACIONES 5558<br/>
                            EST. MEDIA 2,49 d<br/><br/>

                            EXTRANJEROS<br/>
                            VIAJEROS 1477<br/>
                            PERNOCTACIONES 2872<br/>
                            EST. MEDIA 1,94 d<br/>
                           </p>
                    </div>      
                                
                </div>
                    
                 <div class="dot-container0">
                     <span class="dot0" onclick="moverprimero(1)"></span> 
                     <span class="dot0" onclick="moverprimero(2)"></span> 
                     <span class="dot0" onclick="moverprimero(3)"></span>
                </div>
         
                <script>
                    var slideIndex1 = 2;
                    showSlides(slideIndex1);
                    
                    function plusSlides(n) {
                      showSlides(slideIndex1 += n);
                    }
                    
                    function moverprimero(n) {
                      showSlides(slideIndex1 = n);
                    }
                    
                    function showSlides(n) {
                      var i;
                      var slides = document.getElementsByClassName("mySlides0");
                      var dots = document.getElementsByClassName("dot0");
                      if (n > slides.length) {slideIndex1 = 1}
                        if (n < 1) {slideIndex1 = slides.length}
                        for (i = 0; i < slides.length; i++) {
                          slides[i].style.display = "none";
                        }
                        for (i = 0; i < dots.length; i++) {
                          dots[i].className = dots[i].className.replace(" active", "");
                        }
                      slides[slideIndex1-1].style.display = "block";
                      dots[slideIndex1-1].className += " active";
                    }
                </script>

             <a href="#inicio">🏚</a>
        </div>  

        <div class="fondoeleccion">
            <h3 class="titulilloparque">PARQUE NATURAL SIERRA DE LAS NIEVES</h3>

                <div class="slideshow-container1">

                    <div class="mySlides1 fade">
                        <img src="images/FOTOSdN1.jpg" style="width:65%" style="height:25%">
                        <div>Imagen del parque</div>
                    </div>

                    <div class="mySlides1">
                        <p> <h4>DATOS</h4>
                            GEOLOCALIZACIÓN: 36°44'N 4°59'O <br>

                            Hotel y casa rural.<br>

                            Rutas de senderismo, rutas en bicicleta,  
                            rutas en 4x4 y observatorio de aves.<br>

                            Íbice ibérico, gato montés, zorro, comadreja, 
                            garduña, gineta, turón común.<br>
                        </p>
                    </div>
                    
                    <div class="mySlides1">
                         <p> <h4>TURISMO</h4>
                            TOTAL<br>
                            VIAJEROS 2928<br>
                            PERNOCTACIONES 5415<br>
                            EST. MEDIA 1'85 d<br><br>

                            ESPAÑOLES<br>
                            VIAJEROS 1245<br>
                            PERNOCTACIONES 2041<br>
                            EST. MEDIA 1'64 d<br><br>

                            EXTRANJEROS<br>
                            VIAJEROS 1683<br>
                            PERNOCTACIONES 3374<br>
                            EST. MEDIA 2 d<br>
                        </p>
                    </div>      


                </div>
                    
                 <div class="dot-container1">
                     <span class="dot1" onclick="moversegundo(1)"></span> 
                     <span class="dot1" onclick="moversegundo(2)"></span> 
                     <span class="dot1" onclick="moversegundo(3)"></span>
                </div>

                <script>
                    var slideIndex2 = 1;
                    showSlides(slideIndex2);
                    
                    function plusSlides(n) {
                      showSlides(slideIndex2 += n);
                    }
                    
                    function moversegundo(n) {
                      showSlides(slideIndex2 = n);
                    }
                    
                    function showSlides(n) {
                      var i;
                      var slides = document.getElementsByClassName("mySlides1");
                      var dots = document.getElementsByClassName("dot1");
                      if (n > slides.length) {slideIndex2 = 1}
                        if (n < 1) {slideIndex2 = slides.length}
                        for (i = 0; i < slides.length; i++) {
                          slides[i].style.display = "none";
                        }
                        for (i = 0; i < dots.length; i++) {
                          dots[i].className = dots[i].className.replace(" active", "");
                        }
                      slides[slideIndex2-1].style.display = "block";
                      dots[slideIndex2-1].className += " active";
                    }
                </script>
              <a href="#inicio">🏚</a>
            </div>
  
                    

                
                <div class="fondoeleccion">
                    <h3 class="titulilloparque">PARQUE NATURAL DE LA BREÑA Y MARISMAS DE BARBATE</h3>
        
                        <div class="slideshow-container2">
        
                            <div class="mySlides2 fade">
                                <img src="images/FOTOBMB1.jpg" style="width:65%" style="height:25%">
                                <div>Imagen del parque</div>
                            </div>
        
                            <div class="mySlides2">
                                <p> <h4>DATOS</h4>
                                    GEOLOCALIZACIÓN: 36°10'44''N 5°58'22''O <br>
                                    Hotel y casa rural.<br>
                                    Inmersión submarina, surf, observación de aves, 
                                    rutas de senderimos y la destaca visita al tajo vertical de 
                                    los Acantilados de Barbate.<br>

                                    Principalmente fauna aviar; gaviota argéntea, 
                                    garcilla bueyera, garcetas, vencejo, mirlo, cárabo, carbonero, etc.<br>
                                </p>
                            </div> 
                            
                            <div class="mySlides2">
                                <p> <h4>TURISMO</h4>
                                    TOTAL<br>
                                    VIAJEROS 2188<br>
                                    PERNOCTACIONES 7363<br>
                                    EST. MEDIA 3,37 d<br><br>

                                    ESPAÑOLES<br>
                                    VIAJEROS 1417<br>
                                    PERNOCTACIONES 3744<br>
                                    EST. MEDIA 2,64 d<br><br>

                                    EXTRANJEROS<br>
                                    VIAJEROS 771<br>
                                    PERNOCTACIONES 3619<br>
                                    EST. MEDIA 4,69 d<br>
                                </p>
                            </div>      
  
                        </div>
                            
                         <div class="dot-container2">
                             <span class="dot2" onclick="movertercero(1)"></span> 
                             <span class="dot2" onclick="movertercero(2)"></span> 
                             <span class="dot2" onclick="movertercero(3)"></span>
                        </div>
        
                        <script>
                            var slideIndex3 = 1;
                            showSlides(slideIndex3);
                                                       
                            function movertercero(n) {
                              showSlides(slideIndex3 = n);
                            }
                            
                            function showSlides(n) {
                              var i;
                              var slides = document.getElementsByClassName("mySlides2");
                              var dots = document.getElementsByClassName("dot2");
                              if (n > slides.length) {slideIndex3 = 1}
                                if (n < 1) {slideIndex3 = slides.length}
                                for (i = 0; i < slides.length; i++) {
                                  slides[i].style.display = "none";
                                }
                                for (i = 0; i < dots.length; i++) {
                                  dots[i].className = dots[i].className.replace(" active", "");
                                }
                              slides[slideIndex3-1].style.display = "block";
                              dots[slideIndex3-1].className += " active";
                            }
                        </script>
                    <a href="#inicio">🏚</a>
            </div>  

</div>   

</body>
</html>

Advertisement

Answer

This code wont work because there’s a problem with your JavaScript as some variables are conflicting I will suggest you to make separate JavaScript file first and include it in your index.html like this ;

<scritp src=" *your JavaScript file path* "> </script>

this way your code is separated and it’ll be easy to determine problems in your code. well after this follow the same pattern as per link you provided of w3cSchool. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_quotes_slideshow and https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple)

commented out things that you should resolve according to your requirement;

these first two are the default one 3rd is my added one just like this you have to add yourself in the code

  <p>Slideshow 1:</p>
    <div class="slideshow-container">
      <div class="mySlides1">
        <img src="img_nature_wide.jpg" style="width:100%">
      </div>
    
      <div class="mySlides1">
        <img src="img_snow_wide.jpg" style="width:100%">
      </div>
    
      <div class="mySlides1">
        <img src="img_mountains_wide.jpg" style="width:100%">
      </div>
    
      <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
      <a class="next" onclick="plusSlides(1, 0)">❯</a>
    </div>
    <p>Slideshow 2:</p>
    <div class="slideshow-container">
      <div class="mySlides2">
        <img src="img_band_chicago.jpg" style="width:100%">
      </div>
    
      <div class="mySlides2">
        <img src="img_band_la.jpg" style="width:100%">
      </div>
    
      <div class="mySlides2">
        <img src="img_band_ny.jpg" style="width:100%">
      </div>
    
      <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
      <a class="next" onclick="plusSlides(1, 1)">❯</a>
    </div>

    <p>Slideshow 3:</p>
    <div class="slideshow-container">
          <div class="mySlides3"> //NEW CLASS ADDED further more class can be added like this like 4 5 6....and so on
    
            <img src="img_band_chicago.jpg" style="width:100%">
          </div>
        
          <div class="mySlides3">
            <img src="img_band_la.jpg" style="width:100%">
          </div>
        
          <div class="mySlides3">
            <img src="img_band_ny.jpg" style="width:100%">
          </div>
        here I added new number 2 as first two have 0 and 1 now 2 for third slide and 3 4 5.. and so on for more slides to be added watch out these should be added on y-axis as x-axis is responsible for no of jumps one slide should make 
    
          <a class="prev" onclick="plusSlides(-1, 2)">❮</a>
          <a class="next" onclick="plusSlides(1, 2)">❯</a> 
        </div>
        
        <script>
        var slideIndex = [1, 1, 1]; //here array with value will be added for further increase in slides
        var slideId = ["mySlides1", "mySlides2", "mySlides3"] // new classes will be added here
        showSlides(0, 0);
        showSlides(1, 1);
        showSlides(0, 2); //this will increase as well depending upon the no. of slides you'll add 
        
        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";  
        }
        </script>
        
        </body>
        </html>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement