<div class="support-scrollsnap"></div>

<div class="scrollport">
  <img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
	<img src="//placehold.it/400x400" alt="">
</div>

html {
  background: #f2f2f2;
}

.scrollport {
	width: 600px;
	margin: 0 auto;
	overflow: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

img {
  scroll-snap-align: center;
}