为什么我的滑块中的元素没有按预期重复？答案

【问题标题】：Why don't the elements in my slider repeat as expected?为什么我的滑块中的元素没有按预期重复？
【发布时间】：2022-01-28 22:51:15
【问题描述】：

我找到了这个滑块on CodePen。我对其进行了修改以在滑块中使用不同大小的图像。问题是当所有徽标滑开时，滑块会跳到第一个。这看起来不太好。我想要一个重复的效果，在最后一个标志之后出现第一个但没有“跳跃”。

我可以做些什么来解决我的问题？

body,
html {
  height: 100%;
  background-color: white;
}

.container {
  overflow: hidden;
}

.container .slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}

.container .slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}

.container .slider .logos .fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="container h-100">
  <div class="row align-items-center h-100">
    <div class="container rounded">
      <h1 class="text-center">Featured in:</h1>
      <div class="slider">
        <div class="logos">
          <img src="https://via.placeholder.com/80">
          <img src="https://via.placeholder.com/80">
          <img src="https://via.placeholder.com/80">
          <img src="https://via.placeholder.com/80">
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

请注意我对您问题的修改。我使用了一个 sn-p 演示，并包含了来自 Codepen 演示的编译 CSS。这使您的志愿者助手更容易提供帮助。

标签： javascript html css twitter-bootstrap slider

【解决方案1】：

改变这个：

.container {
  overflow: hidden;
  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      .fab {
        width: calc(100% / 5);
        animation: fade-in 0.5s 
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

到这里：

.container {
  overflow: hidden;
  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      img {
        width: calc(100% / 5);
        animation: fade-in 0.5s 
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

【讨论】：

您的问题需要一些解释。我不得不仔细检查两次才能发现实际的变化，目前还不清楚你为什么这样做。见How to Answer。
谢谢！我做编辑。我希望现在更清楚了。
一点也不清晰。我们仍然必须逐行比较您所做的更改。请添加一些解释，而不是说明。

【解决方案2】：

当您用图像替换 Font Awesome 图标时，您没有更新 CSS 中的选择器以匹配。此外，图像的数量用于 CSS 宽度计算。你需要更新它。

最后，在原始演示中，图像被放置在标记中两次。你需要这样做。

我还消除了对周围标记的依赖，使滑块可独立部署。

.slider {
  white-space: nowrap;
  overflow: hidden;
}

.slider-inner {
  animation: slidein 30s linear infinite;
}

.slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}

.slider .logos img {  /* updated selector */
  width: calc(100% / 4);  /* must match the number of elements in your slider */
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<h1 class="text-center">Featured in:</h1>

<div class="slider">
  <div class="slider-inner">

    <!-- must be included twice -->
    <div class="logos">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200/ff0000">
    </div>

    <div class="logos">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200">
      <img src="https://via.placeholder.com/200/ff0000">
    </div>
  </div>
</div>

【讨论】：