<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;
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.