CSS Slideshow avec fonction if()

• if()
• aspect-ratio
• grid
• opacity
• animation
• transition

Votre navigateur ne supporte pas cette démonstration

<div class="demo slideshow">

<img src="image-1.jpg" alt>
<img src="image-2.jpg" alt>
<img src="image-3.jpg" alt>
<img src="image-4.jpg" alt>
<img src="image-5.jpg" alt>

</div>
	

*,
*::after,
*::before{

box-sizing: border-box

}

.slideshow {
    
display:grid;
animation: slideshow 20s infinite linear; 
width:90%; 
max-width:960px;
justify-self:center;   
    } 
    
.slideshow>*{
    
    grid-area:1/1
    
    }
    
.slideshow img {

    transition: opacity 1s;
    aspect-ratio:3/2;
    display:block; 
    width:100%; 
    height:100%;
    object-fit:contain;
    
    }
img:nth-child(1) {opacity:if(style(--image:1):1;else:0);}
img:nth-child(2) {opacity:if(style(--image:2):1;else:0);}
img:nth-child(3) {opacity:if(style(--image:3):1;else:0);}
img:nth-child(4) {opacity:if(style(--image:4):1;else:0);}
img:nth-child(5) {opacity:if(style(--image:5):1;else:0);}

    
    
@keyframes slideshow {
0%, 20% {--image:1;}
20.01%, 40% {--image:2;}
40.01%, 60% {--image:3;}
60.01%, 80% {--image:4;}
80.01%, 100% {--image:5;}

}