Need explanation about Slideshow code from JS

Need explanation about Slideshow code from JS
0.0 0

#1

Can someone explain me this code? What is showDiv’s? I cant find any info on it. And why did he use it. What is “n” he used as argument inside of function? And what does function plusDiv’s do here? What is showDivs(n) of function? Also why did he use if n is higher than x.length and later if n is less than 1? And why did he put x[slideIndex-1].style.display = “block”; in end of function? Im a bit confused here.
https://w3schools.com/w3css/w3css_slideshow.asp


#2

It is the following function defined in the code example provided.

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

Which n are you referring? There are two different functions with an n argument (plusDivs and showDivs).

I appears to call showDivs and uses the slideIndex value by adding n to it.

Answered above

The first if statement resets the slideIndex back to one, once the last slide is reached. The second if statement sets slideIndex to the total number of slides in the instance of the user clicking on the left arrow when the first slide is showing, so that the last slide shows next.

Because each time the left or right arrow is clicked, the following code changes the display property to none for all the images, so the line above is needed so the only the current image/slide shows.

  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }

#3

Im referring to both n’s in both functions. What are they? And Why did he call first picture in the beggining by setting slideIndex to 1, why not from 0 since JS counts from 0? Or am i missing something?


#4

They are arguments passed to the functions.

Just the author’s way of doing things. If you notice in the last line of code, the index used for x is slideIndex - 1, which would account for the zero-based indexing to which you are referring.


#5

So n in function’s names is a given number of slideIndex which is 1? And why did he use if n is less than 1 then slideIndex is set to length of img elements (x.length)? I dont understand that part tbh, wouldnt it be more logical to use if n is smaller than x.length to set slideIndex to x.length? And why is x[slideIndex-1].style.display = "block"; in a very bottom of function showDiv’s? What does this slideIndex-1 mean?


#6

I have already answered these questions above. I suggest putting in some console.log statements at various points to see what the values of each variable displays, so you can better understand the logic. You can use your browser’s console (Ctrl + Shft + J if using Chrome) to see what gets displayed to the console as you click on the left and right arrows.


#7

Ok now i understand the if part. In my opinion i believe could would be more understandable if if statements were nested in loop. But idk if that could be a better idea. But one last question i remember that slideIndex-1 has to do with zero based indexing but im curious how it works here, need a bit more clarification of its effect on clicking right or left button. Is there any simmilar code situations and maybe some references i can practice something like this code?