P粉6048485882023-08-16 10:44:33
In the sixth column, it works perfectly with class .poster
, whether using Bootstrap 5 or not.
edit:
You can add a poster with a hidden attribute at the end and it will work as long as the last poster does not contain class .poster
:)
<div style="visibility: hidden;"> <img src="https://soft.com.mx/test/images/posters/poster6.jpg" class="img-fluid" /> </div>
@keyframes moves {
to {
background-position: -100vw 80%;
}
}
.galería {
position: relative;
overflow: hidden;
}
.poster {
position: absolute;
animation: moveAcross 6s linear infinite;
}
.poster-1 {
animation-delay: -0s;
animation-duration: 6s;
}
.poster-2 {
animation-delay: -1s;
animation-duration: 6s;
}
.poster-3 {
animation-delay: -2s;
animation-duration: 6s;
}
.poster-4 {
animation-delay: -3s;
animation-duration: 6s;
}
.poster-5 {
animation-delay: -4s;
animation-duration: 6s;
}
.poster-6 {
animation-delay: -5s;
animation-duration: 6s;
}
@keyframes moveAcross {
0% {
left: -300px;
}
100% {
left: 110%;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="galeria">
<div class="col poster poster-1">
<img src="https://picsum.photos/300/300?random=1" class="img-fluid" />
</div>
<div class="col poster poster-2 ">
<img src="https://picsum.photos/300/300?random=2" class="img-fluid" />
</div>
<div class="col poster poster-3">
<img src="https://picsum.photos/300/300?random=3" class="img-fluid" />
</div>
<div class="col poster poster-4 ">
<img src="https://picsum.photos/300/300?random=4" class="img-fluid" />
</div>
<div class="col poster poster-5">
<img src="https://picsum.photos/300/300?random=5" class="img-fluid" />
</div>
<div class="col poster poster-6">
<img src="https://picsum.photos/300/300?random=6" class="img-fluid" />
</div>
</div>
</div>