How to make a slider loop with JS?

Issue

maybe someone can tell me, how to make it so that when clicking next, the user sees an infinite loop of slider elements? At the moment, I was only able to make the elements move inside the slider.
I’m assuming that I need to create new items inside the carousel on every click.

I would be grateful for advice on what to do next.

function sliderFunc() {
    let sliderBox = document.querySelector('.slider');
    let tapToRightBtn = document.querySelector('.btn');

    function sliderNext() {
        sliderBox.style.transform += 'translateX(-100px)';
        sliderBox.style.transition = '0.3s';
    }
    tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();

.container {
  max-width: 300px;
  margin: auto;
  overflow: hidden;
}
.slider {
  background: #eee;
  display: flex;
  width: 500px;
  border: solid;
}
.slide {
  width: 200px;
  height: 100px;
  margin-right: 10px;
}
.slide1 {
  background: #f3ca63;
}
.slide2 {
  background: #d06c65;
}
.slide3 {
  background: #6579d0;
}
.slide4 {
  background: #65d073;
}
.slide5 {
  background: #ba65d0;
}
.btn {
  margin: 2rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<section class="container">
  <div class="slider">
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
    <div class="slide slide4"></div>
    <div class="slide slide5"></div>
  </div>
  <button class="btn">Next</button>
</section>
</body>
</html>

Solution

I made a simple script based on what you want. You may want to optimize it by removing the object(s) when they are not displayed.

What I have changed:

Instead of transitioning using translateX(-100px), I make the container position relative then moving using left attribute (you’re doing it wrong, you have to check for the value first then remove the px suffix)
Make a timeout function to clone the object at index, then put it at the end of the slider object (have to increase the width and set the left style properly). The function sync exactly with the transition duration.

function sliderFunc() {
  let sliderBox = document.querySelector('.slider');
  let tapToRightBtn = document.querySelector('.btn');
  let index = 0;
  sliderBox.style.width = '500px';
  sliderBox.style.left = '0px';

  function sliderNext() {
    setTimeout(() => {
      index++;
      let child = sliderBox.querySelector(`div:nth-child(${index})`);
      let cloneNode = child .cloneNode(true);
      sliderBox.style.width = `${(5 + index) * 100}px`;
      sliderBox.appendChild(cloneNode);
    }, 300);
    // clone and move the element to bottom
    let currentLeftPosition = sliderBox.style.left ? parseFloat(sliderBox.style.left.replace('px', '')) : 0;
    let nextLeftPosition = currentLeftPosition - 100;
    sliderBox.style.left = `${nextLeftPosition}px`;

  }
  tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();

.container {
  max-width: 300px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.slider {
  background: #eee;
  display: flex;
  min-width: 500px;
  border: solid;
  position: relative;
  transition: left 0.3s;
}

.slide {
  width: 200px;
  height: 100px;
  margin-right: 10px;
}

.slide1 {
  background: #f3ca63;
}

.slide2 {
  background: #d06c65;
}

.slide3 {
  background: #6579d0;
}

.slide4 {
  background: #65d073;
}

.slide5 {
  background: #ba65d0;
}

.btn {
  margin: 2rem;
}

<section class="container">
  <div class="slider">
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
    <div class="slide slide4"></div>
    <div class="slide slide5"></div>
  </div>
  <button class="btn">Next</button>
</section>

Answered By – Bao Nguyen

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

ErrorsFixing

How to make a slider loop with JS?

Issue

Solution

Leave a Reply Cancel reply