Search code examples
javascriptphpjqueryhtmlslideshow

Javascript slideshow issue display all images same time

I've done a PHP page that with a cicle FOR autogenerate a list of some data. Textual part is easy and works well, I use variable "i" of PHP FOR to create same script many times (all 0 and 1 at the end of methods and variables are just <?php $i ?>)

but I have problems with a JS slideshow, I'm not too praticle of JS.

now the slideshow doesn't work properly and display all images at same time

I've posted 2 cicles of my code, what did I do wrong?

<div class="slideshow-container">
                      <div class="mySlides0">
                        <div class="numbertext">1 / 3</div>
                        <img src="images/logo.jpg" style="width:100%">
                        <div class="text">Caption Text</div>
                      </div>

                      <div class="mySlides0">
                        <div class="numbertext">2 / 3</div>
                        <img src="images/logo.jpg" style="width:100%">
                        <div class="text">Caption Two</div>
                      </div>

                      <div class="mySlides0">
                        <div class="numbertext">3 / 3</div>
                        <img src="images/logo.jpg" style="width:100%">
                        <div class="text">Caption Three</div>
                      </div>

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

                    <div style="text-align:center">
                      <span class="dot0" onclick="currentSlide0(1)"></span> 
                      <span class="dot0" onclick="currentSlide0(2)"></span> 
                      <span class="dot0" onclick="currentSlide0(3)"></span> 
                    </div>

                    <script>

                        slideIndex0 = 1; 
                        showSlides0(slideIndex0); 


                        function plusSlides0(n) {
                          showSlides0(slideIndex0 += n);
                        }

                        function currentSlide0(n) {
                          showSlides0(slideIndex0 = n);
                        }

                        function showSlides0(n) {
                          var i;
                          var slides = document.getElementsByClassName("mySlides0");
                          var dots = document.getElementsByClassName("dot0");
                          if (n > slides.length {slideIndex0 = 1} 
                          if (n < 1) {slideIndex0 = 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[slideIndex0-1].style.display = "block"; 
                          dots[slideIndex0-1].className += " active";
                        }

                    </script>




                  <div class="slideshow-container">
                  <div class="mySlides1">
                    <div class="numbertext">1 / 3</div>
                    <img src="Golf/20170309_122804.jpg" style="width:100%">
                    <div class="text">Caption Text</div>
                  </div>

                  <div class="mySlides1">
                    <div class="numbertext">2 / 3</div>
                    <img src="Golf/20170309_122759.jpg" style="width:100%">
                    <div class="text">Caption Two</div>
                  </div>

                  <div class="mySlides1">
                    <div class="numbertext">3 / 3</div>
                    <img src="images/logo.jpg" style="width:100%">
                    <div class="text">Caption Three</div>
                  </div>

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

                <div style="text-align:center">
                  <span class="dot1" onclick="currentSlide1(1)"></span> 
                  <span class="dot1" onclick="currentSlide1(2)"></span> 
                  <span class="dot1" onclick="currentSlide1(3)"></span> 
                </div>

                <script>

                    slideIndex1 = 1; 
                    showSlides1(slideIndex1); 

                    function plusSlides1(n) {
                      showSlides1(slideIndex1 += n);
                    }

                    function currentSlide1(n) {
                      showSlides1(slideIndex1 = n);
                    }

                    function showSlides1(n) {
                      var i;
                      var slides = document.getElementsByClassName("mySlides1");
                      var dots = document.getElementsByClassName("dot1");
                      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>
Solution

  • Your issue is because you have not close the if condition

    Replace

    if (n > slides.length {slideIndex0 = 1}

    by

    if (n > slides.length) {slideIndex0 = 1}

    work fine

    slideIndex0 = 1; 
showSlides0(slideIndex0); 


function plusSlides0(n) {
  showSlides0(slideIndex0 += n);
}

function currentSlide0(n) {
  showSlides0(slideIndex0 = n);
}

function showSlides0(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides0");
  var dots = document.getElementsByClassName("dot0");
  if (n > slides.length) {slideIndex0 = 1} 
  if (n < 1) {slideIndex0 = 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[slideIndex0-1].style.display = "block"; 
  dots[slideIndex0-1].className += " active";
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="mySlides0">
    <div class="numbertext">1 / 3</div>
    <img src="https://upload.wikimedia.org/wikipedia/fr/3/37/Ic%C3%B4ne_foobar2000_v1.1.2.png" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides0">
    <div class="numbertext">2 / 3</div>
    <img src="https://image.freepik.com/icones-gratuites/bouton-de-telephone-de-symbole_318-41893.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides0">
    <div class="numbertext">3 / 3</div>
    <img src="http://www.icone-png.com/png/39/39057.png" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

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

<div style="text-align:center">
  <span class="dot0" onclick="currentSlide0(1)"></span> 
  <span class="dot0" onclick="currentSlide0(2)"></span> 
  <span class="dot0" onclick="currentSlide0(3)"></span> 
</div>