x direction scroll snap demo

by justforuse

HTML

<div id="gallery">
  <img src="https://picsum.photos/600/300/?image=1" alt="">
  <img src="https://picsum.photos/600/300/?image=10" alt="">
  <img src="https://picsum.photos/600/300/?image=20" alt="">
  <img src="https://picsum.photos/600/300/?image=30" alt="">
  <img src="https://picsum.photos/600/300/?image=40" alt="">
  <img src="https://picsum.photos/600/300/?image=50" alt="">
  <img src="https://picsum.photos/600/300/?image=60" alt="">
</div>

CSS

#gallery {
  scroll-snap-type: x mandatory;
  /* necessary */
  overflow-x: scroll;
  display: flex;
}

#gallery img {
  scroll-snap-align: center;
  margin: 0 10px;
}