<style>

img {

    /* Defines the center of each photo as the

       coordinate that should be used for snapping */

    scroll-snap-coordinate: 50% 50%;

}

.photoGallery {

    width: 500px;

    overflow-x: auto;

    overflow-y: hidden;

    white-space: nowrap;

    /* Specifies that each element’s snap coordinate should

       align with the center of the scroll container */

    scroll-snap-destination: 50% 50%;

    /* Requires that scrolling always end at a snap point

       when the operation completes (hard snap). */

    scroll-snap-type: mandatory;

}

</style>

​

<div class="photoGallery">

    <img src="img1.jpg" width=200>

    <img src="img2.jpg" width=200>

    <img src="img3.jpg" width=200>

    <img src="img4.jpg" width=200>

    <img src="img5.jpg"  width=200>

    <img src="img1.jpg" width=200>

    <img src="img2.jpg" width=200>

    <img src="img3.jpg" width=200>

    <img src="img4.jpg" width=200>

    <img src="img5.jpg  width=200>

</div>

​