Javascript 如何在旋转木马的第一张幻灯片和最后一张幻灯片之间添加平滑过渡？

这有点难以解释，所以我做了一些参考。 我正在尝试使用香草JavaScript克隆引导转盘，我添加了幻灯片之间的转换，这对于第一张和最后一张幻灯片之间存在的所有幻灯片都很好，但是，当我单击“上一页”按钮从第一张幻灯片转到最后一张幻灯片，或者单击“下一页”按钮从最后一张幻灯片转到第一张幻灯片时，这种转换行为很奇怪，它会沿着中间的所有其他幻灯片移动

这是我使用的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)`;
});

const carousel_slide=document.querySelector（“.carousel slide”）；
const carousel_images=document.queryselectoral（“.carousel幻灯片img”）；
const prev_btn=document.querySelector（“prevBtn”）；
const next_btn=document.querySelector（“#nextBtn”）；
设计数器=0；
let size=carousel_图像[0]；
下一步\u btn.addEventListener（“单击”，（）=>{
carousel_slide.style.transition=“所有0.3秒轻松进退”；
计数器++；
if（计数器>=旋转木马图像长度）{
计数器=-1；
计数器++；
}
carousel_slide.style.transform=`translateX（${-size*counter}px）`；
});
上一个btn.addEventListener（“单击”，（）=>{
carousel_slide.style.transition=“所有0.3秒轻松进退”；
计数器--；
如果（计数器<0）{
计数器=旋转木马图像。长度-2；
计数器++；
}
carousel_slide.style.transform=`translateX（${-size*counter}px）`；
});

---

请帮助我解决此旋转木马的这些结尾幻灯片之间的过渡问题？谢谢

首先复制第一张幻灯片并在结尾插入，然后复制最后一张幻灯片并在开头插入：

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

---

工作演示：

谢谢@ariel，这是一个绝妙的解决方案！请你进一步解释一下，为什么你要从

counter=carousel_images.length-1

然后将1添加回

计数器

此处

translateX（${-size*（计数器+1）}px）

1），因为最后一个是第一个重复的。所以我们需要

last-1

2）计数器需要加1，因为第一张幻灯片是最后一张重复的幻灯片谢谢，我们分别在末尾和第一张克隆了first和last，但是

console.log（carousel\u images.length）

输出5而不是7。为什么？啊，是的。。我在想那件事。当您执行

carousel_images=document.queryselectoral（“.carousel slide img”）克隆之前，它只保存原始幻灯片。如果在克隆后执行此操作，将有7个条目
if (counter >= carousel_images.length) {
  setTimeout(() => {
    counter = 0;
    carousel_slide.style.transition = "none";
    carousel_slide.style.transform = `translateX(${-size}px)`;
  }, 300);
}