@BLINK-ALLOW:setSize*
@BLINK-ALLOW:posInSet*
@BLINK-ALLOW:focusable*
-->
<!doctype html>
<style>
.carousel {
display: grid;
grid-auto-columns: 100%;
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
div {
width: 100%;
&::scroll-marker {
display: block;
content: "";
aspect-ratio: 1;
width: 24px;
border: 1px solid silver;
}
&::scroll-marker:target-current {
background: white;
}
&::scroll-marker:where(:hover, :active, :focus) {
background: lightgray;
}
}
anchor-name: --carousel;
&::scroll-button(inline-end),
&::scroll-button(inline-start) {
position: absolute;
position-anchor: --carousel;
top: anchor(center);
inset-inline: anchor(start) anchor(end);
inline-size: 44px;
content: "";
}
&::scroll-button(inline-end) {
top: anchor(center);
inset-inline: auto anchor(end);
content: "";
}
}
</style>
<div class="carousel">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
