Как добавить плавный переход между первым и последним слайдом карусели?

Question

Это немного сложно объяснить, поэтому я сделал этот код для любой ссылки. Я пытаюсь клонировать Bootstrap карусель, используя ваниль JavaScript, я добавил переход между слайдами, который хорошо работает для всех слайдов, существует между первым и последним слайдом, но когда я нажимаю предыдущую кнопку, чтобы go от первого слайда до последнего слайда или при нажатии кнопки «Далее» до go с последнего слайда до первого слайда этот переход ведет себя странно, он проходит по всем другим слайдам между ними.

Это html Я использую:

   <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>

и 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)`;
});

Пожалуйста, помогите мне решить эту проблему перехода между этими конечными слайдами этой карусели? Спасибо

Answer 1

Сначала вы дублируете первый слайд и вставляете в конец, а затем дублируете последний слайд и вставляете в начало:

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)`;

При переходе к слайду перед первым (копия последнего ), вы ждете окончания анимации и молча переходите к последнему:

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

А когда вы переходите к слайду после последнего (копия первого), вы молча переходите к первому :

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

Рабочая демоверсия: https://codepen.io/bortao/pen/MWwOVbd