<h3>scroll-snap-type: mandatory</h3>    
<div class="wrapper">
    <div class="gallery type--mandatory">
        <img src="https://img-fotki.yandex.ru/get/4301/yoksel.51/0_3b50c_c6d45e3c_L">
        <img src="https://img-fotki.yandex.ru/get/4207/yoksel.52/0_3b683_58a9a800_L" alt="" />
        <img src="https://img-fotki.yandex.ru/get/4304/yoksel.51/0_3b5ed_af944741_L" alt="" />
        <img src="https://img-fotki.yandex.ru/get/4302/yoksel.52/0_3b622_777f0a3f_L" alt="" />
        <img src="https://img-fotki.yandex.ru/get/4209/yoksel.52/0_3b7b2_ee1602c6_L" alt="" />
        <img src="https://img-fotki.yandex.ru/get/4305/yoksel.51/0_3b50d_1b2fa52_L" alt="" />
        <img src="https://img-fotki.yandex.ru/get/4208/yoksel.52/0_3b7ee_fc993941_L" alt="" />
    </div>
</div>
BODY {
    text-align: center;
    background: #333;
    }
H3 {
    margin-top: 1em;
    font: 1.5em/1 Arial;
    color: #FFF;
    }  

.wrapper {
    display: inline-block;
    margin: 1em 0;
    padding: 10px;
    border: 1px solid #DDD;
    border-radius: 47px;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    background: #FFF;
    }
.gallery {
    width: 500px;
    height: 333px;
    overflow-y: hidden;
    overflow-x: auto;
    border-radius: 37px;
    white-space: nowrap;
    letter-spacing: -.25em;
    
    /* Scroll Snap Properties */    
    scroll-snap-type: x mandatory;
    scroll-snap-points-x: repeat(100%);
    }
img {
    scroll-snap-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.