实现循环滚动的 Testimonial Slider（从右向左连续播放）的问题求助

各位大佬，快救救我吧，这个问题快把我逼疯了😭

我想要实现一个从右向左滚动的 testimonial 轮播，当第三张幻灯片滑过去之后，第一张能无缝跟在后面继续滚动。但现在的问题是，当滚动到第三张之后，三张幻灯片会一下子全部滑回右侧，看起来特别生硬，完全不是我想要的效果。

我理想的效果是这样的：<-slider 1-> <-slider 2-> <-slider 3-> 然后无缝接上 <-slider 1-> 继续向左滚动。

有没有大佬能帮忙看看？提前谢谢大家了！

问题分析 #

你当前的实现是在滚动到最后一张后直接重置索引并瞬间跳回第一张，这就导致了视觉上的生硬跳转。要实现无缝循环，我们可以通过复制第一张幻灯片到轮播容器的末尾，当滚动到这个复制的幻灯片时，瞬间切换到原始的第一张位置，同时保持过渡效果的连续性，这样用户就看不到跳转的痕迹了。

修改后的完整代码 #

HTML

<div class="text-carousel">
  <div class="carousel-slides">
    <div class="carousel-slide">
      <p>“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Genuine people that collaborate by offering a simplistic and excellent approach.”</p>
    </div>
    <div class="carousel-slide">
      <p>“Recruitment, Finance, and Operation experts on demand.”</p>
    </div>
    <!-- 复制第一张幻灯片到末尾，用于无缝循环 -->
    <div class="carousel-slide">
      <p>“A unique recruitment, operations and finance solution that expertly supports aspiring businesses bridge their current capabilities and future potential.”</p>
    </div>
  </div>
</div>

CSS

.text-carousel {
  position: relative;
  width: 100%; /* Full width */
  max-width: 600px; /* Maximum width */
  margin: auto; /* Center the carousel */
  overflow: hidden; /* Hides overflow content */
  background-color: transparent; /* Transparent background */
}

.carousel-slides {
  display: flex; /* Use flex for sliding effect */
  transition: transform 0.5s ease-in-out; /* Smooth transition */
  /* 现在有4张幻灯片，所以宽度设为400% */
  width: 400%; 
}

.carousel-slide {
  width: 25%; /* 4张幻灯片，每张占25%宽度 */
  box-sizing: border-box; /* Include padding in width */
  padding: 20px; /* Space inside slides */
  text-align: center; /* Center text */
  font-size: 1.2rem; /* Font size */
  font-weight: bold; /* Bold text */
  color: #20A2D3; /* Text color */
}

JavaScript

let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-slide');
const slidesContainer = document.querySelector('.carousel-slides');
// 注意这里totalSlides是原始的3张，不是包含复制的4张
const totalSlides = slides.length - 1;

// Function to display the current slide
function showSlide(index) {
    const newPosition = -index * (100 / totalSlides); 
    slidesContainer.style.transition = "transform 0.5s ease-in-out";
    slidesContainer.style.transform = `translateX(${newPosition}%)`;
}

// Function to handle the auto-scrolling
function autoScroll() {
    currentIndex++;

    // 当滚动到复制的那张幻灯片时
    if (currentIndex > totalSlides) {
        // 瞬间切换到原始第一张的位置，关闭过渡
        slidesContainer.style.transition = "none";
        currentIndex = 0;
        showSlide(currentIndex);
        
        // 短暂延迟后重新开启过渡，继续滚动
        setTimeout(() => {
            slidesContainer.style.transition = "transform 0.5s ease-in-out";
        }, 50);
    } else {
        showSlide(currentIndex);
    }
}

// Start auto-scrolling every 3 seconds
setInterval(autoScroll, 3000);
showSlide(currentIndex); // Initial display

关键修改点说明 #

1. HTML部分：复制了第一张幻灯片到轮播容器的最后，这样当第三张滑完后，用户会看到和第一张一样的内容，不会出现空白或跳转。
2. CSS部分：调整了carousel-slides的宽度为400%（因为现在有4张幻灯片），同时把每张carousel-slide的宽度改为25%，保证每张都能占满容器宽度。
3. JavaScript部分：
   • 把totalSlides设为原始幻灯片数量（3），排除复制的那张。
   • 当currentIndex超过原始最后一张的索引时，瞬间切换到原始第一张的位置，然后重新开启过渡，这样视觉上就实现了无缝循环，用户完全察觉不到跳转。

这样修改后，你的轮播就能实现从右向左连续滚动，第三张之后无缝接上第一张的效果啦！

备注：内容来源于stack exchange，提问作者Mattobiwan