如何为Flexbox排序实现平滑滚动的无限轮播？

你当前的轮播通过修改flex元素的order属性实现切换，但order不支持CSS过渡，所以没法直接做出滑动效果。要实现平滑滑入滑出的无限轮播，我们可以改用滚动容器+克隆首尾元素的方案，具体修改如下：

修改后的完整代码 #

HTML #

<div class="buttons">
  <div class="button button-left" data-direction="left">LEFT</div>
  <div class="button button-right" data-direction="right">RIGHT</div>
</div>

<div class="post-carousel">
  <!-- 新增滚动容器，隐藏溢出 -->
  <div class="carousel-scroll-container">
    <div class="carousel-slides">
      <!-- 克隆最后一个元素，放在开头 -->
      <div class="carousel-slide" data-placement="clone-last">THREE</div>
      <!-- 原元素 -->
      <div class="carousel-slide red" data-placement="1">ONE</div>
      <div class="carousel-slide blue" data-placement="2">TWO</div>
      <div class="carousel-slide" data-placement="3">THREE</div>
      <!-- 克隆第一个元素，放在结尾 -->
      <div class="carousel-slide red" data-placement="clone-first">ONE</div>
    </div>
  </div>
</div>

CSS #

.post-carousel {
  margin: 0 auto 40px;
  outline: 1px solid black;
  width: 640px;
}
.buttons {
  display: flex;
  justify-content: space-between;
  width: 620px;
  margin: auto;
}
.button {
  background-color: #fff;
  border: 1px solid green;
  z-index: 2;
  padding: 4px;
  width: 45px;
  cursor: pointer;
}
/* 新增滚动容器，隐藏溢出 */
.carousel-scroll-container {
  overflow: hidden;
  margin: 0 10px;
}
.carousel-slides {
  column-gap: 10px;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  /* 开启平滑滚动过渡 */
  transition: transform 0.5s ease;
}
.carousel-slide {
  background-color: lightgreen;
  border-radius: 16px;
  outline: 1px solid #d6e2ff;
  display: flex;
  flex-direction: column;
  flex: 200px 0 0;
  font-size: 12px;
  gap: 16px;
  height: 50px;
  justify-content: center;
  max-width: 280px;
  outline: 2px solid green;
  padding: 24px 0;
  text-align: center;
}
.carousel-slide.red {
  background-color: red;
}
.carousel-slide.blue {
  background-color: blue;
}

JavaScript #

const scrollContainer = document.querySelector('.carousel-scroll-container');
const slidesContainer = document.querySelector('.carousel-slides');
const slideWidth = document.querySelector('.carousel-slide').offsetWidth + 10; // 包含间隙
let currentPosition = 1; // 初始位置指向第一个原元素（跳过开头的克隆元素）

// 初始化：将容器滚动到第一个原元素位置
scrollContainer.scrollLeft = slideWidth;

document.querySelectorAll('.buttons .button').forEach((button) => {
  button.addEventListener('click', (event) => {
    slide(event.target.getAttribute('data-direction'));
  });
});

const slide = (direction) => {
  // 滚动过程中禁止重复点击
  if (slidesContainer.style.transform.includes('transition')) return;

  if (direction === 'right') {
    currentPosition++;
    slidesContainer.style.transform = `translateX(-${currentPosition * slideWidth}px)`;
  } else if (direction === 'left') {
    currentPosition--;
    slidesContainer.style.transform = `translateX(-${currentPosition * slideWidth}px)`;
  }

  // 过渡结束后重置位置，实现无限效果
  setTimeout(() => {
    if (currentPosition === 4) {
      // 滚动到结尾克隆元素后，重置到第一个原元素位置
      currentPosition = 1;
      slidesContainer.style.transition = 'none';
      slidesContainer.style.transform = `translateX(-${currentPosition * slideWidth}px)`;
      // 触发重绘，让无过渡的重置生效
      void slidesContainer.offsetWidth;
      slidesContainer.style.transition = 'transform 0.5s ease';
    } else if (currentPosition === 0) {
      // 滚动到开头克隆元素后，重置到最后一个原元素位置
      currentPosition = 3;
      slidesContainer.style.transition = 'none';
      slidesContainer.style.transform = `translateX(-${currentPosition * slideWidth}px)`;
      void slidesContainer.offsetWidth;
      slidesContainer.style.transition = 'transform 0.5s ease';
    }
  }, 500); // 等待过渡完成（和CSS的transition时长一致）
};

方案说明 #

• 克隆首尾元素：在轮播容器的首尾分别克隆最后一个和第一个原元素，这样当滚动到边缘时，视觉上会衔接成无限循环。
• CSS过渡：给carousel-slides添加transition: transform 0.5s ease，实现滑动的平滑效果。
• 位置重置：当滚动到克隆元素位置时，立即移除过渡效果，将容器重置到对应的原元素位置，再恢复过渡，用户完全感知不到这个重置操作，从而实现无限滚动的假象。
• 滚动计算：通过slideWidth计算每个元素的总宽度（包含间隙），确保每次滚动的距离准确。

内容的提问来源于stack exchange，提问作者user18102663