This is based on the video from the Code2Go Youtube channel.

It uses:

• The ::scroll-button() pseudo element for left and right buttons. These pseudo elements are attached to the element you wish to scroll: .carousel::scroll-button(left) { .. }. There is a content property like the pseudo elements ::before and :;after.
• scroll snapping to keep
• Anchor positioning is used to fix the buttons to the right spot on the carousel. There are several properties:
  • anchor-name for anchor positioning. This is the element you wish to anchor something to. It’s like a custom property name: anchor-name: --carousel
  • position-anchor added to the buttons defines the element you’re attaching to: position-anchor: --carousel
  • position-area is where you wish to position the buttons to. There are 9 options. These can be fine tuned using translate.
• the align-content property used for vertical centering on a display: block element.
• Scroll snapping is used to make the scrolling snap to the start of a card.
  • scroll-snap-type: x mandatory is added to the container. The scrolling is along the x axis and the the snapping is enforced.
  • scroll-snap-align: start is added to the cards so the scrolling snaps to the start of a card.

See also the post on scrolling which covers some this there.