<div class="slideshow">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
<img src="image4.jpg" alt="">
<img src="image5.jpg" alt="">
<div class=indicateur></div>
</div>
*{box-sizing: border-box}
img{max-width:100%}
.slideshow{
position: relative;
max-width: 600px;
aspect-ratio: 3/2;
border-radius: .75rem;
overflow: hidden;
}
.slideshow img {
top: 0;
left: 0;
animation: slideshow 25s ease infinite;
position: absolute;
opacity: 0;
}
@keyframes slideshow {
0%{opacity: 0}
10%{opacity: 1}
20%{opacity: 1}
25%{opacity: 0}
100%{opacity: 0}
}
.slideshow img:nth-child(2) {
animation-delay: 5s;
}
.slideshow img:nth-child(3) {
animation-delay: 10s;
}
.slideshow img:nth-child(4) {
animation-delay: 15s;
}
.slideshow img:nth-child(5) {
animation-delay: 20s;
}
.indicateur{
width:100%;
height: 6px;
background: rgba(255, 255, 255, 0.52);
position: absolute;
bottom: 0;
transform-origin: left;
animation: indication 5s ease infinite;
}
@keyframes indication{
from{
transform:scalex(0);
}
to{
transform:scalex(100%)
}
}
