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

Question

我在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>

Answer 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;
}
}
}
}

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>