Carousel without JS

carousel.html

<g-carousel>
  <g-images>
     <a href="#b"><img id="a" src="https://source.unsplash.com/random/800x400?sig=1"></a>
     <a href="#c"><img id="b" src="https://source.unsplash.com/random/800x400?sig=2"></a>
     <a href="#a"><img id="c" src="https://source.unsplash.com/random/800x400?sig=3"></a>
  </g-images>
</g-carousel>

<style>

g-carousel {
  display: block;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
a {
  display: contents;
}
g-images {
  display: flex;
  width: calc(100% * 3);
}
img {
  width: 100%;
  scroll-snap-align: center;
}
</style>