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

Question

这有点难以解释，所以我做了this codepen 以供参考。 我正在尝试使用 vanilla JavaScript 克隆 Bootstrap 轮播，我在幻灯片之间添加了过渡，这对第一张和最后一张幻灯片之间存在的所有幻灯片都很有效，但是当我单击上一个按钮从第一张幻灯片转到最后一张幻灯片或单击下一个按钮从最后一张幻灯片到第一张幻灯片这个过渡的行为很奇怪，它沿着中间的所有其他幻灯片传播。

这是我使用的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