从右到左无限轮播滑块失效求助（无需重复HTML结构）

现有代码的问题 #

1. 动画关键帧中translate(-30%, 0)是固定比例，无法覆盖滑块全部内容，动画结束后会直接跳回起点，导致轮播出现断层。
2. 动画时长03s是无效语法，浏览器无法识别，需去掉前缀的0。
3. 仅靠固定的滑块内容，无法实现视觉上的无限循环衔接。

解决方案思路 #

通过JS动态克隆一次滑块内的卡片内容，让滑块总长度变为原来的2倍，同时调整动画的位移值为-100%，这样当第一组内容完全移出容器时，第二组内容刚好衔接在容器左侧，动画循环时就会无缝过渡，既不用手动重复HTML结构，又能实现无限轮播。

完整代码示例 #

CSS（修正动画语法与关键帧）

.slider-container {
  width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  /* 可根据需求调整动画时长，15s为平缓滚动示例 */
  animation: slideRightToLeft 15s linear infinite;
}

.slider-card {
  flex: 0 0 auto;
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@keyframes slideRightToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 移动距离等于原始滑块内容的宽度 */
    transform: translateX(-100%);
  }
}

HTML（保持原始结构不变）

<div class="slider-container">
  <div class="slider">
    <div class="slider-card">Card 1</div>
    <div class="slider-card">Card 2</div>
    <div class="slider-card">Card 3</div>
    <div class="slider-card">Card 4</div>
    <div class="slider-card">Card 5</div>
    <div class="slider-card">Card 6</div>
    <div class="slider-card">Card 7</div>
    <div class="slider-card">Card 8</div>
    <div class="slider-card">Card 9</div>
    <div class="slider-card">Card 10</div>
    <div class="slider-card">Card 12</div>
    <div class="slider-card">Card 13</div>
  </div>
</div>

JS（动态克隆内容实现无缝衔接）

const slider = document.querySelector('.slider');
// 克隆原始卡片内容
const clonedContent = slider.innerHTML;
// 将克隆内容追加到滑块末尾
slider.innerHTML += clonedContent;

优化提示 #

• 若想避免JS执行前的短暂原始状态，可给.slider初始设置visibility: hidden，JS执行后再改为visibility: visible。
• 动画时长可根据卡片数量和期望滚动速度调整，数值越大滚动越平缓。

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