如何在轮播的第一张和最后一张幻灯片之间添加平滑过渡？

Question

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

Answer 1

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