How to add smooth transition between first and last slide of a carousel?

Basir Payenda :

It is a bit hard to explain so I made this codepen for any reference. I am trying to clone Bootstrap carousel using vanilla JavaScript, I added transition between slides which works nice for all slides exists between first and last slide, but as I click previous button to go from first slide to last slide or clicking next button to go from last slide to first slide this transition behaves weird it travels along all other slides in between.

This is the html I use:

   <div class="carousel-container">
    <div class="carousel-slide">
      <img src="imgs/pc1(1).jpg" class="firstSlide" alt="">
      <img src="imgs/pc1(2).jpg" alt="">
      <img src="imgs/pc1(3).jpg" class="lastSlide" alt="">
    </div>
  </div>
  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>

and the JavaScript:

const carousel_slide = document.querySelector(".carousel-slide");
const carousel_images = document.querySelectorAll(".carousel-slide img");
const prev_btn = document.querySelector("#prevBtn");
const next_btn = document.querySelector("#nextBtn");

let counter = 0;
let size = carousel_images[0].clientWidth;

next_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
  counter++;
  if (counter >= carousel_images.length) {
    counter = -1;
    counter++;
  }
  carousel_slide.style.transform = `translateX(${-size * counter}px)`;
});

prev_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
  counter--;
  if (counter < 0) {
    counter = carousel_images.length - 2;
    counter++;
  }
  carousel_slide.style.transform = `translateX(${-size * counter}px)`;
});

Please help me solve this transition problem between these ending slides of this carousel? Thank you

ariel :

First you duplicate the first slide and insert in the end, and duplicate the last slide and insert in the beginning:

var lastSlide = carousel_images[slidecount - 1].outerHTML;
var firstSlide = carousel_images[0].outerHTML;
carousel_slide.insertAdjacentHTML('afterbegin', lastSlide);
carousel_slide.insertAdjacentHTML('beforeend', firstSlide);
// Shift to the second slide:
carousel_slide.style.transform = `translateX(${-size}px)`;

When you move to the slide before the first (a copy of the last), you wait for the animation to end, and silently shift to the last:

if (counter < 0) {
  setTimeout(() => {
    counter = carousel_images.length - 1;
    carousel_slide.style.transition = "none";
    carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  }, 300);
}

And when you move to the slide after the last (a copy of the first), you silently shift to the first:

if (counter >= carousel_images.length) {
  setTimeout(() => {
    counter = 0;
    carousel_slide.style.transition = "none";
    carousel_slide.style.transform = `translateX(${-size}px)`;
  }, 300);
}

Working demo: https://codepen.io/bortao/pen/MWwOVbd