<div class="wrapper">
    <div class="gallery">
        <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 {
    background: #333;
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 47px;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    transform: translate(-50%, -50%);
    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;
}