Difficulty understanding the slideshow JS code

this is for an assignment that i have to do, and i was asked to comment throughout the code, i dont understand most of it to be honest. code with arrows i dont understand, itd be amazing if someone could help me with it!

let slideIndex=1;
showSlides(slideIndex); <----

//next/previous controls
function plusSlides(n) { <----//why is the n there
showSlides(slideIndex+=n); <----
}

//thumbnail image controls
function currentSlide(n){ <----
showSlides(slideIndex=n); <----
}

function showSlides(n){ <----
let i; <---- //why is i not assigned anything
let slides= document.getElementsByClassName(“mySlides”);
let dots= document.getElementsByClassName(“dot”);
if (n>slides.length){slideIndex=1} <----
if (n<1){slideIndex=slides.length}<----
for (i=0; i<slides.length; i++){<---- i get completely lost here
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”;<----
}

Ill try to insert comments at places where you are confused

let slideIndex=1;
// 'Here we call the function showSlides with argument slideIndex
// The function was declareth beneath
// functions declared with the "function" keyword have this weird feature
showSlides(slideIndex);

// n is a parameter to the function
function plusSlides(n) { <----//why is the n there
// here we assign slideIndex to have value its previous value plus "n" value
// then we call showSlides with that value, e.g. showSlides(1+3)
showSlides(slideIndex+=n); <----
}

// here once more we declare a function, named currentSlide, which takes a single parameter(called n)
// this time we assign the value of slideIndex to be equal n and call showSlides with that value
// for example currentSlide(5) would make slideIndex = 5 and then call showSlides(5)
function currentSlide(n){ <----
showSlides(slideIndex=n); <----
}

// declaring the infamous showSlides function
// its a bit counter-intuitive to have this bottom to top declarative chain
function showSlides(n){
// i is simply declared to exist, with let we dont have to give initial value, it would be undefined
let i; <---- //why is i not assigned anything
let slides= document.getElementsByClassName(“mySlides”);
let dots= document.getElementsByClassName(“dot”);
// if n(the argument passed to showSlides) is greater than the slides(lendgth), reset slidesIndex to its initial value(1)
if (n>slides.length){slideIndex=1} <----
// if n is less than 1, slidesIndex becomes the slides number/length
// this way whenever we run out of slides(sliding left/fight/bot/top), the value goes to the start/end
if (n<1){slideIndex=slides.length}<----
// if you dont know how for loop works, i cant help :)
// this whole for loop purpose is to iterate through the slides and set each one to display:none
// display: none; is a css rule which removes an element from the DOM, making it "dissapear"
for (i=0; i<slides.length; i++){<---- i get completely lost here
slides[i].style.display=“none”<----
}
// this for loop iterates through the "dots"(elements with class name "dots"
// and remove the class "active"(deactivating its applied styles)
for (i=0; i<dots.length; i++){<----
dots[i].className=dots[i].className.replace(" active", “”);<----
}
// this will grab the slide with index "slideIndex - 1"(refer to current slideIndex value upper)
// and set its display to "block"(recall earlier we made all to be "none"
// this way only the one with style block, will be visible
slides[slideIndex-1].style.display=“block”;<----
// here, once again we target the dot with the same index as the slide we target above
// and assigng to it the class "active"
// i assume that class has the purpose to outline the dot from all others
dots[slideIndex-1].className +=“active”;<----
}

If you are so confused with that code, my advise to you is take a step back(or few) from that course and take something at your level. You seem to not know how functions work, how they are declared, what a function parameter/argument is, how they are called, what for loop is, how it behaves. In order to udnerstand code, you first need to know the basics, each separate segment, in order to read it. Its like trying to read a sentence, but not knowing the meaning of each word. You need to learn the words first, before you can read the sentence, understand its meaning, and speak it eventually

2 Likes

I agree with Sylvant up there. Unfortunately, if you don’t understand any of the code, you may want to take a step back. There are a lot of beginner concepts which you are asking about all of which are covered in the first couple courses here on freeCodeCamp. However, if you want to push forward with understanding it (which is fine too), I recommend reading up about:

javascript:
variables, functions, ES6 let, if statements, for loops, objects

HTML:
class, style

CSS:
display tag

that should get most of the code readable.