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">
<div data-src="url(image1.jpg)">
<img src="image1.jpg" alt loading="lazy">
</div>
<div data-src="url(image2.jpg)">
<img src="image2.jpg" alt loading="lazy">
</div>
<div data-src="url(image3.jpg)">
<img src="image3.jpg" alt loading="lazy">
</div>
<div data-src="url(image4.jpg)">
<img src="image4.jpg" alt loading="lazy">
</div>
</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;
scroll-marker-group: after;
}
.slider::scroll-marker-group {
display: flex;
flex-flow: wrap;
margin-top:1rem;
gap: 1rem;
min-height: 70px;
align-items: center;
}
.slider>div{
--miniature: attr(data-src type(<image>), "");
}
.slider >div::scroll-marker {
content:" ";
aspect-ratio: 1;
width: 4rem;
opacity:.6;
cursor: pointer;
border:1px solid;
justify-content: center;
transition: 0.5s ease-out;
background: var(--miniature, transparent);
background-size: cover;
background-repeat: no-repeat;
}
.slider >div::scroll-marker:where(:hover, :active, :focus,:target-current) {
opacity:1
}
.slider img{
vertical-align: middle;
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){
text-box: trim-both cap alphabetic;
content:'';
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(*):not(:focus-visible):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}
}
