how to make an infinite autoplay slider on a website

Issue

I'm making a slider that should automatically rotate and the problem is that when rotating, the photos that have been or will be shown remain in the background. Also, in the background there should be one photo on the left and right, and not 2 as I did.

I tried many times to change the code in JavaScript, as well as CSS, but nothing changed and left the original code. I will be very glad for your help.

document.addEventListener("DOMContentLoaded", function() {
  setInterval(rotate, 2000);
});

function rotate() {
  var slider = document.querySelector('.slider');
  var lastChild = slider.lastElementChild.cloneNode(true);
  slider.lastElementChild.remove();
  slider.insertAdjacentElement('afterbegin', lastChild);
}

.container {
  width: 40vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.slider {
  height: 100%;
  width: 100%;
  display: flex;
  perspective: 1000px;
  position: relative;
  align-items: center;
}

.box {
  width: 300px;
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  position: absolute;
  background-color: lightgray;
}

.box:nth-child(7),
.box:nth-child(1) {
  transform: scale(0.2) translate(-50%, -50%);
  bottom: 10%;
  z-index: 1;
}

.box:nth-child(2),
.box:nth-child(6) {
  transform: scale(0.4) translate(-50%, -50%);
  top: 20%;
  z-index: 2;
}

.box:nth-child(3),
.box:nth-child(5) {
  transform: scale(0.6) translate(-50%, -50%);
  top: 30%;
  z-index: 3;
}

.box:nth-child(4) {
  width: 20vw;
  height: 40vh;
  transform: scale(1) translate(-50%, -50%);
  top: 50%;
  z-index: 4;
  color: #fff;
}

.box:nth-child(1) {
  left: -13%;
}

.box:nth-child(2) {
  left: -5%;
}

.box:nth-child(3) {
  left: 10%;
}

.box:nth-child(4) {
  left: 50%;
}

.box:nth-child(5) {
  left: 71%;
}

.box:nth-child(6) {
  left: 85%;
}

.box:nth-child(7) {
  left: 100%;
}

@keyframes firstChild {
  0% {
    left: 100%;
    transform: scale(0.2) translate(-50%, -50%);
  }
  100% {
    left: -13%;
    transform: scale(0.2) translate(-50%, -50%);
  }
}

<div class="container">
  <div class="slider">
    <div class="box" style="background-image: url('https://picsum.photos/200/300?a')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?b')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?c')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?d')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?e')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?f')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?g')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?h')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?i')"></div>
    <div class="box" style="background-image: url('https://picsum.photos/200/300?j')"></div>
  </div>
</div>

Solution

Add these lines of CSS:

First, hide all the boxes:

.box {
  display:none
}

Next, show only the ones that you need to be visible:

.box:nth-child(2), .box:nth-child(3), .box:nth-child(4),
.box:nth-child(5), .box:nth-child(6) {
  display:block;
}

I know you think that you only need two in the background, but you actually do need two on each side, as these are the positions that the left and right slides slide from and to. You'll just display the slider in a space where the far left and far right slides won't be visible.

Answered By - Chad Phillips