Javascript 在显示所有内容之前结束转盘转换

我目前正在制作一个滚动徽标的旋转木马，但我有一个问题。 如果徽标数量过高，动画将在显示所有徽标之前结束

有没有办法在重置动画之前显示所有徽标

这里是我的旋转木马的一个例子（在这里它工作得很好，因为图像的数量很少，但是如果我添加更多，这就是一个问题）

下面是Codepen中的一个工作示例。

---

如果您的幻灯片数量不会动态变化，并且您不打算使用javascript，我建议您在计算中使用幻灯片数量和容器宽度，以使动画按需要工作：

$slides-count: 16;
$slide-width: 250px;
$container-width: 960px;

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc($container-width - ($slide-width * $slides-count)))
  }
}

.slide-track {
  animation: scroll 50s linear infinite;
  animation-fill-mode: forwards;
  display: flex;
  width: calc($slides-count * $slide-width);
}

如果徽标数量过高，动画将在显示所有徽标之前结束

根据您的代码，您需要确保两个因素：

• 添加更多徽标需要将其添加到回退中
  例如，HTML结构中的幻灯片如下所示：
  img1、img2、img3、img4、img1、img2、img3、img4
  因此，要添加更多徽标，应添加两次：
  img1，img2，img3，img4，img5，img1，img2，img3，img4，img5

---

• 由于我们添加了更多徽标项目，我们必须增加幻灯片动画数量，以匹配显示的徽标数量：

@关键帧滚动{
0%{transform:translateX（0）；}
100%{转换：translateX（计算（-250px*7如果您想让carroussel动态适应幻灯片的数量，您应该研究JavaScript解决方案。谢谢您的帮助。我需要使用49个图像来完成这项工作。我修改了关键帧中的变换，但我的动画仍然会在动画期间中断重新启动。我应该更改其他内容吗？我做了一些计算打开后，看起来浏览器限制在10000px左右，旋转木马12250‬px（250px*49）。这个问题也有类似的经验。所以你必须依赖JavaScription。我把宽度设为100px*49怎么样，应该可以吗？
$slides-count: 16;
$slide-width: 250px;
$container-width: 960px;

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc($container-width - ($slide-width * $slides-count)))
  }
}

.slide-track {
  animation: scroll 50s linear infinite;
  animation-fill-mode: forwards;
  display: flex;
  width: calc($slides-count * $slide-width);
}