<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;
}
This Pen doesn't use any external JavaScript resources.