CSS Slider avec contrôles (::scroll-button)

Votre navigateur ne supporte pas cette démonstration

Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

<div class="slider">

<img src="image1.jpg" alt loading="lazy"> 
 
<img src="image2.jpg" alt loading="lazy"> 

<img src="image3.jpg" alt loading="lazy"> 

<img src="image4.jpg" alt loading="lazy"> 

	
</div>

*,*::before,*::after{box-sizing: border-box}

.slider{

display:grid;
max-width:800px;
width:100%;
grid-auto-columns:100%;
grid-auto-flow:column;
gap:1.5rem;
background-color:#f1f1f1;
scrollbar-width:none;
anchor-name:--slider;
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
	}

		
	
.slider img{
	
scroll-snap-align:center;
width:100%;
height:100%;
object-fit:cover;

}
	


.slider::scroll-button(*){
cursor:pointer;
position:absolute;
z-index:1;
position-anchor:--slider;
margin:1rem;
border-radius:9999px;
height:2.5cap;
aspect-ratio:1;
border:none;
background-color:#fff;
font-size:clamp(1rem,2vw + 1rem,2rem);
color:#000;
transition:opacity .25s,filter .5s;

	}
	
.slider::scroll-button(left),
.slider::scroll-button(right){
	

position-area:var(--pa);

}			
		
.slider::scroll-button(right){
	
content:'❯';	
--pa: span-inline-start;
	
	}
				
.slider::scroll-button(left){
	
content:'❮';
--pa: span-inline-end;
						
}

	
	
.slider::scroll-button(*):hover{
		
filter:invert(1) 
			
			}
	

	
.slider::scroll-button(*):disabled{
	
		opacity:0;
		cursor:not-allowed;
		interactivity:inert
	}
		

	
@media (prefers-reduced-motion: no-preference){
	
	.slider{scroll-behavior:smooth}
	
	}