<section>
  <div class="container">
    <img class="list-img" src="https://picsum.photos/375/667?random=1" />
    <img class="list-img" src="https://picsum.photos/375/667?random=2" />
    <img class="list-img" src="https://picsum.photos/375/667?random=3" />
    <img class="list-img" src="https://picsum.photos/375/667?random=4" />
    <img class="list-img" src="https://picsum.photos/375/667?random=5" />
    <img class="list-img" src="https://picsum.photos/375/667?random=6" />
    <img class="list-img" src="https://picsum.photos/375/667?random=7" />
    <img class="list-img" src="https://picsum.photos/375/667?random=8" />
    <img class="list-img" src="https://picsum.photos/375/667?random=9" />
    <img class="list-img" src="https://picsum.photos/375/667?random=12" />
    <img class="list-img" src="https://picsum.photos/375/667?random=13" />
    <img class="list-img" src="https://picsum.photos/375/667?random=43" />
    <img class="list-img" src="https://picsum.photos/375/667?random=15" />
    <img class="list-img" src="https://picsum.photos/375/667?random=36" />
    <img class="list-img" src="https://picsum.photos/375/667?random=71" />
    <img class="list-img" src="https://picsum.photos/375/667?random=18" />
  </div>
</section>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
}

section {
  background: url("https://www.w3cplus.com/sites/default/files/blogs/2021/2104/apple-iphone12-blue-portrait.png")
    no-repeat center;
  background-size: contain;
  width: 320px;
  height: 568px;
  position: relative;
}

.container {
  display: flex;
  width: 230px;
  height: 500px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 45px;
  border-radius: 30px;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

img {
  width: auto;
  height: 500px;
  object-fit: cover;
  object-position: center;

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.