This is a simple example of doing multiple overlays using the position:absolute trick. You set the outer element carousel to position:relative, then when you set position:absolute on the internal figure elements. When you do that you can set the top/bottom/left/right to 0 and each figure will fill and cover each other. Finally, you set all of the inactive figure to display:none to remove it from the display, and set the active figure to display:flex.

The next/prev tags are using a similar setting, but they are set to the far left and right using this:

carousel next {
  right: 0;
}

carousel prev {
  left: 0;
}

This also demonstrates how to simplify your CSS by removing duplication. The common aspects of the next/prev buttons are placed in a single CSS stanza:

carousel next,prev {
  position: absolute;
  bottom: 0;
  opacity: 0%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

This configures the next/prev buttons with all of the common features by using the , (comma) which works as an "or" operation, meaning "this applies to next or prev inside carousel. Then you can set their positions after with a few lines more.

The last part to study is how the figcaption is placed at the bottom for each image. It's using the same setup as the next/prev.

Using Opacity

You can use opacity: 0% to make something invisible instead of using display:none or visibility:hidden. The only advantage of opacity over visibility:hidden seems to be that visibility removes the element from accessibility so screen readers won't recognize it. The issue with display:none is it removes the element completely so that it doesn't take up space, which is what we want with the figures but not the next/prev buttons.