I like the bare bones idea you have with creating this carousel - only CSS and HTML. 

Some friendly suggestions: I would make the images smaller, and not take up the whole page.

```js
.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

```

Here is a Codepen [link][1] of the idea I was talking about.

[![screenshot][2]][2]


  [1]: https://codepen.io/Schepp/full/WNbQByE
  [2]: https://i.sstatic.net/dG1kk.png