Ce slideshow utilise une ancienne méthode pour le responsive.
<div class=cadre-slideshow>
<ul class=slideshow>
<li><img src="image.jpg" alt></li>
<li><img src="image.jpg" alt></li>
<li><img src="image.jpg" alt></li>
</ul>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
.cadre-slideshow{
max-width: 600px;
margin:5rem auto
}
.slideshow{
margin: 0;
list-style-type: none;
position: relative;
overflow: hidden;
padding-bottom: 66.67%;
border: 10px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.4)
}
.slideshow li{
position: absolute;
opacity: 0;
top:0;
left: 0;
bottom: 0;
animation: slide 9s linear infinite
}
.slideshow li img{
object-fit: cover;
height:100%;
width:100%
}
.slideshow li:nth-child(2) {
animation-delay: 3s
}
.slideshow li:nth-child(3){
animation-delay: 6s
}
@keyframes slide{
0%{
opacity: 0
}
12%{
opacity: 1;
}
25%{
opacity: 1;
}
37% {
opacity: 0;
}
100% {
opacity:0;
}
}