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

External CSS

  1. https://codepen.io/tutsplus/pen/d4c251bca68cf66cf9212d508dcedf7d

External JavaScript

This Pen doesn't use any external JavaScript resources.