Native CSS Carousel with Scroll Snap

<!-- Using different image width to demonstrate the scroll-snal-align center -->
<div class="photo-gallery">
    <img src="https://source.unsplash.com/random/500x320">
    <img src="https://source.unsplash.com/random/400x320">
    <img src="https://source.unsplash.com/random/300x320">
    <img src="https://source.unsplash.com/random/450x320">
    <img src="https://source.unsplash.com/random/400x320">
</div>

.photo-gallery {
  width: 500px;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.photo-gallery img {
  scroll-snap-align: center;
  max-width: 100vw;
  height: 100%;
  object-fit: cover;
}