Explaining code

1

HI
im new in JavaScript. I really like gallery that i found on w3school site, unfortunately they didn’t explained how it works. Can somebody please explain to me how this code works?

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;
}

for more information here is link to this gallery on w3chool
https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

2

why don’t you explain what you understand so it is possible to focus only on what you are missing?

3

Honestly the whole js is hard to understand for me.

4

Have you gone through the JavaScript curriculum on FCC?

5

Im learning js for a while yet still this code is hard to understand. I can just copy and paste that block of code but i was hoping someone can explain it to me first.