SOURCE

<div class="box">
    <img src="https://picsum.photos/500/300?random=1" alt="">
    <img src="https://picsum.photos/500/300?random=2" alt="">
    <img src="https://picsum.photos/500/300?random=3" alt="">
    <img src="https://picsum.photos/500/300?random=4" alt="">
    <img src="https://picsum.photos/500/300?random=5" alt="">
    <img src="https://picsum.photos/500/300?random=6" alt="">
    <img src="https://picsum.photos/500/300?random=7" alt="">
</div>

.box {
    display: flex;
    gap: 20px;
    box-shadow: 0 3px 10px 0 rgba(0 0 0 / 0.1);
    border-radius: 5px;
    padding: 20px;
    width: 640px;
    position: relative;
    scroll-behavior: smooth;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    margin: 0 auto;
}

img {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}