<main class="wrap">
	<aside>
		<ul>
			<li>
				<a href="#one">
					<img src="http://www.deathghost.cn/public/upload/article/2020/03/15/1584252551368617.jpg">
				</a>
			</li>
			<li>
				<a href="#two">
				<img src="http://www.deathghost.cn/public/upload/article/2020/04/17/1587123891863548.jpg">
				</a>
			</li>
			<li>
				<a href="#three">
				<img src="http://www.deathghost.cn/public/upload/article/2020/04/17/1587115391146769.jpg">
				</a>
			</li>
			<li>
				<a href="#four">
				<img src="http://www.deathghost.cn/public/upload/article/2019/12/20/1576772791897557.jpg">
				</a>
			</li>
			<li>
				<a href="#five">
				<img src="http://www.deathghost.cn/public/upload/article/2019/12/15/1576343625020465.jpg">
				</a>
			</li>
		</ul>
	</aside>
	<section>
		<img id="one" src="http://www.deathghost.cn/public/upload/article/2020/03/15/1584252551368617.jpg">
		<img id="two" src="http://www.deathghost.cn/public/upload/article/2020/04/17/1587123891863548.jpg">
		<img id="three" src="http://www.deathghost.cn/public/upload/article/2020/04/17/1587115391146769.jpg">
		<img id="four" src="http://www.deathghost.cn/public/upload/article/2019/12/20/1576772791897557.jpg">
		<img id="five" src="http://www.deathghost.cn/public/upload/article/2019/12/15/1576343625020465.jpg">
	</section>
</main>
ul{
	margin:0;
	padding:0;
}
li{list-style:none;}
.wrap{
  margin: 0 auto;
	background:rgb(37, 36, 36);
	width:640px;
	height:354px;
	display: grid;
	grid-template-columns: 1fr 5fr;
}
.wrap img{
	width: auto;
	max-width: 100%;
	height: auto;
}
.wrap section{
	height: 100%;
	overflow: auto;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}
.wrap section img{
	object-fit: cover;
	height: 100%;
	scroll-snap-align: start;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.