stackoverflow.com/questions/62477861 - back-and-forth carousel

back-and-forth carousel

by MerkUriy

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="carousel-container">
      <i class="fa fa-angle-left" id="prevBtn"></i>
      <i class="fa fa-angle-right" id="nextBtn"></i>
      <div class="carousel-slide">
        <img src="//dummyimage.com/500x250.png/09f/fff&text=1" title="first" />
        <img src="//dummyimage.com/500x250.png/90f/fff&text=2" />
        <img src="//dummyimage.com/500x250.png/9f0/fff&text=3" />
        <img src="//dummyimage.com/500x250.png/f90/fff&text=4" />
        <img src="//dummyimage.com/500x250.png/f09/fff&text=5" title="last" />
      </div>
    </div>
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
}

.carousel-slide {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.carousel-slide img {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 100vw;
}

JavaScript

const carouselSlide = document.querySelector(".carousel-slide");
const carouselImages = document.querySelectorAll(".carousel-slide img");

const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");

let counter = 0;
let index = counter;
let isInvert = false;
const size = carouselImages[0].clientWidth;
const updateSlideTransformX = () => {
  carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
};

updateSlideTransformX();

let interval = 3000; // 1000 * 3 sec
setInterval(function() {
  index++;
  if (index >= carouselImages.length - 1) {
    index = 0;
    isInvert = !isInvert;
  }

  counter = isInvert ? carouselImages.length - 1 - index : index;
  carouselImages[counter].id === "firstClone";
  carouselSlide.style.transition = "transform 0.4s ease-in-out";

  updateSlideTransformX();
}, interval);