I'm having a difficult time understanding sliders(carousel)

Question

today I decided to learn how to make sliders (carousel) , I must point out that I am pretty much new to JavaScript.

First I tried to think how I should code that myself, I had no inspiration or ideas whatsoever. (Just pointless ideas) , so I went to watch youtube in hope of "enlightment" and there were solutions, but a bit too advanced for me to understand.(and long)

After that I googled "how to make sliders" and I found something simpler on w3schools. At first, I was a bit confused, but after a while I started to understand it bit by bit, of course, not totally.

So here comes the question, can someone explain me what each line does and how it affects the others? Or if there is a better and easier method, I would love to hear it.

Here is the javascript file(followed by CSS and HTML), I only modified a few variable names to understand them better and replaced var with let or const:

let index = 1;
showDivs(index);

function plusSlide(value) {
  showDivs(index += value);
}

function showDivs(value) {
  let i;
  let slider = document.getElementsByClassName("slides");
  if (value > slider.length) {
    index = 1;
  }
  if (value < 1) {
    index = slider.length;
  }
  for (i = 0; i < slider.length; i++) {
    slider[i].style.display = "none";
  }
  slider[index - 1].style.display = "block";
}

.sliders {
  display: flex;
  width: 400px;
  height: 200px;
}

input[type="button"] {
  width: 100px;
}





  Test

user_4893371 · Answer

This specific approach works like this: (Explaining in comments)

let index = 1; // Initializes index variable to point to the first element
               // of your slide array we'll see later

showDivs(index);

function plusSlide(value) {
  showDivs(index += value);  // This function just increments your index value
                             // and displays the next slide
}

function showDivs(value) {
  let i;
  /*
   You get the array of slides from the dom using the class name slides
  */

  let slider = document.getElementsByClassName("slides");
  if (value > slider.length) {  // in case we completed a full circle, we go
                                //from the start again
    index = 1;
  }
  if (value < 1) { // in case we try to go left beyond number 1, we display 
                   // the last one ( to achieve the circular ux experience )
    index = slider.length;
  }
  for (i = 0; i < slider.length; i++) {
    slider[i].style.display = "none";  // Hides every slider
  }
  slider[index - 1].style.display = "block"; // Shows only our index slider
}

I don't think this is the best approach. Because every time you want to change slide, every slide from the DOM element is retrieved, and its style is changed. You change the display state of every slide in every click. In my opinion you can use the document.getElementsByClassName("slides"); only one time outside of the function, in a greater scope and thus make your changes.

Also I wouldn't try to iterate through every slide and hide it. I would just nitialize every slide to have their display equal to "none" and in every showDiv I would just hide my current index ( before the incremention) and just show next one. Like this:

const slider = document.getElementsByClassName("slides");

function showDivs(value) {

  slider[index-1].style.display = "none";  // hides our current slider before 
                                         // the incremention
 
  if (value > slider.length) { 
    index = 1;
  }
  if (value < 1) { 
    index = slider.length;
  }
  
  slider[index - 1].style.display = "block"; // Shows only our index slider
}


.sliders {
  display: none;
  width: 400px;
  height: 200px;
}

I'm having a difficult time understanding sliders(carousel)

1 Answers