HTML and CSS only Interactive Carousel

by Génesis García Morilla

HTML

<g-carousel>
  <g-images>
     <a href="#b"><img id="a" src="https://picsum.photos/800/400?random=1"></a>
     <a href="#c"><img id="b" src="https://picsum.photos/800/400?random=2"></a>
     <a href="#a"><img id="c" src="https://picsum.photos/800/400?random=3"></a>
  </g-images>
</g-carousel>

CSS

body {
  margin: 0;
  padding: 0;
}

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;
}