How to Add and Remove Items From a Native CSS Carousel (...with CSS)

"The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons, which enable users to scroll 85% of the scrollport, unless scroll snapping is enabled, as well as scroll markers, which enable users to skip to specific scroll targets (direct children of the scroll container)."

"These buttons and markers make themselves present via CSS pseudo-elements. At the time of this writing, these pseudo-elements are only supported in Chrome 142+: ::scroll-marker: a generated element that links to a scroll target in a scroll container (behaves like an <a>) ::scroll-button(<direction>): a generated element that scrolls 85% of the scrollport, where <direction> can be up , down, left, right, or all (behaves like a <button>)"

The CSS Overflow Module Level 5 specifies scrolling controls that allow users to navigate overflow content without manual scrolling. Scroll buttons scroll 85% of the scrollport unless scroll snapping is enabled. Scroll markers let users jump to specific scroll targets, defined as direct children of the scroll container. Both controls are exposed via CSS pseudo-elements and are supported in Chrome 142+. ::scroll-marker behaves like an anchor linking to a scroll target. ::scroll-button(<direction>) behaves like a button and supports directions up, down, left, right, or all. A carousel example uses these features and checkboxes to add or remove items.

Read at Frontendmasters