Home » Javascript » Javascript – Image slider not working

Javascript – Image slider not working

Posted by: admin August 19, 2018 Leave a comment

Questions:

The image slider doesn’t show the image when it is clicked on at the bottom.

What may be the problem?

It shows differently in uc browser and differently in firefox

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = 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[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}
<div class="container">
  <!-- Container for the image gallery -->
  <!-- Full-width images with number text -->
  <div class="mySlides">
    <img src="https://via.placeholder.com/350x150" style="width:100%"><br/>
  </div>
  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
  <!-- Image text -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>
  <!-- Thumbnail images -->
  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://via.placeholder.com/50x50" style="width:100%" onclick="currentSlide({{$i}})" alt="good">
    </div>
  </div>
</div>
Answers: