CODEWITHSUNDEEP
javascript
Lol72
Lol72

Reputation: 39

how to make an infinite loop? (slider javascript)

My slider contains X slides (4 in the example). I want show 3 slides in same time and go back to the beginning when you get to the end.
For example:

Could someone help me loop the slider properly?
I tried with if this.slide[this.nbrClick +2] != undefined, but that's a lot of conditions.

class Slider {
  constructor() {
    this.slide = document.getElementsByClassName("slide");
    this.next = document.getElementById("next");
    this.nbr = this.slide.length;
    this.nbrClick = 0;
  }
  click() {
    this.next.addEventListener("click", () => {
      this.nbrClick++;
      if (this.nbrClick > this.nbr) {
        this.nbrClick = 1;
      }
      for (let i = 0; i < this.nbr; i++) {
        this.slide[i].classList = "slide hidden";
      }
      this.slide[this.nbrClick].classList = "slide left";
      this.slide[this.nbrClick + 1].classList = "slide center";
      this.slide[this.nbrClick + 2].classList = "slide right";
    })
  }
}
let slider = new Slider();
slider.click();
#slider {
  position: relative;
  height: 200px;
  display: flex;
}

.slide {
  height: 200px;
  width: 200px;
  position: absolute;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  transform: translateX(0px);
}

.center {
  transform: translateX(200px);
}

.right {
  transform: translateX(400px);
}

.hidden {
  display: none;
}
<div id="slider" style="display: flex">
  <div class="slide left">1</div>
  <div class="slide center">2</div>
  <div class="slide right">3</div>
  <div class="slide hidden">4</div>
</div>
<button id="next">Next</button>

Upvotes: 3

Views: 3488

Answers (1)

Nina Scholz
Nina Scholz

Reputation: 386520

You could take the rest of the value with the reminder operator % and the given length of the slides.

this.slide[this.nbrClick % this.nbr].classList = "slide left";
this.slide[(this.nbrClick + 1) % this.nbr].classList = "slide center";
this.slide[(this.nbrClick + 2) % this.nbr].classList = "slide right";

The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.

For example if you take 10 and want a remainder value with 3, the result is 1.

10 - Math.floor(10 / 3) * 3 = 1

or a bit more practical with the value of the code:

0 % 3 = 0
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2


class Slider {
  constructor() {
    this.slide = document.getElementsByClassName("slide");
    this.next = document.getElementById("next");
    this.nbr = this.slide.length;
    this.nbrClick = 0;

  }

  click() {
    this.next.addEventListener("click", () => {
      this.nbrClick++;
      if (this.nbrClick > this.nbr) {
        this.nbrClick = 1;
      }
      for (let i = 0; i < this.nbr; i++) {
        this.slide[i].classList = "slide hidden";
      }
      this.slide[this.nbrClick % this.nbr].classList = "slide left";
      this.slide[(this.nbrClick + 1) % this.nbr].classList = "slide center";
      this.slide[(this.nbrClick + 2) % this.nbr].classList = "slide right";
    });
  }
}

let slider = new Slider();
slider.click();
#slider { position: relative; height: 200px; display: flex; }
.slide { height: 200px; width: 200px; position: absolute; border: 1px solid black; display: flex; justify-content: center; align-items: center; }
.left { transform: translateX(0px); }
.center { transform: translateX(200px); }
.right { transform: translateX(400px); }
.hidden { display: none; }
<div id="slider" style="display: flex">
  <div class="slide left">1</div>
  <div class="slide center">2</div>
  <div class="slide right">3</div>
  <div class="slide hidden">4</div>
</div>

<button id="next">Next</button>

Upvotes: 3

Related Questions