I found this slider on CodePen. I modified it to use images in the slider with different sizes. The problem is when all logos slide away, the slider jumps to the first one. This looks not good. I want a repeating effect, that after the last logo the first one appear but with no "jump".
What can I do to solve my problem?
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>change this:
.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;
}
}
}
}
to this:
.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;
}
}
}
}
When you replaced the Font Awesome icons with images you didn't update the selector in the CSS to match. Also, the quantity of images is used in the CSS width calculation. You need to update that.
Finally, in the original demo the images were placed in the markup twice. You need to do that.
I also removed reliance on the surrounding markup to make the slider independently deployable.
.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>