I was making a slider using css3 keyframes. I don't want my last slide directly jump to first slide. I found some questions related to it and found that duplicating the first image trick will work.
It works fine first time, but second time the first slide take double time compare to normal time which is obvious because last slide and first slide are same.
So is there any way to resolve this issue?
Also I found this answer, in this the last solution is too close to answer this question, but the problem is when it starts, its coming from the right i.e transform:translateX(100%)
which I don't want. I want my image to start from the transform:translateX(0)
.
So is there any way to make a slider, except repeating the first image, which looks like infinite loop using css3 keyframes having same sliding time
Stack Snippet
.inner {
width: 200px;
height: 200px;
overflow: hidden;
}
.images-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-animation: slideToLeft 10s ease infinite;
animation: slideToLeft 10s ease infinite;
}
@keyframes slideToLeft {
0%,
20% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
25%,
45% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
50%,
70% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
75%,
100% {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
}
<div class="inner">
<div class="images-wrapper">
<img src="http://via.placeholder.com/200x200/ff0000" alt="">
<img src="http://via.placeholder.com/200x200/00ff00" alt="">
<img src="http://via.placeholder.com/200x200/0000ff" alt="">
<img src="http://via.placeholder.com/200x200/ff0000" alt="">
</div>
</div>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…