【CSS】フリック操作に対応したカルーセルの作成方法

scroll-snap-typeプロパティを使用した、フリック操作に対応したカルーセルの作成方法です。scroll-snap-typeを使用すればcssのみで実現可能です！

HTML

<div class="container">
	<ul>
		<li>ITEM01</li>
		<li>ITEM02</li>
		<li>ITEM03</li>
		<li>ITEM04</li>
		<li>ITEM05</li>
	</ul>
</div>

CSS

.container ul {
	display: grid;
 	grid-template-columns: repeat(5, 100%);
	scroll-snap-type: x mandatory;
	overflow-x: auto;
}

.container ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 450px;
	list-style: none;
	scroll-snap-align: start;
}

.container ul li:nth-of-type(1){
	background: #fbdd74;
}

.container ul li:nth-of-type(2){
	background: #ff6e6c;
}

.container ul li:nth-of-type(3){
	background: #67568c;
}

.container ul li:nth-of-type(4){
	background: #078080;
}

.container ul li:nth-of-type(5){
	background: #232323;
}

▼CodePen
こちらにコードを書きました。
https://codepen.io/naoko_toya/pen/XWEbbYK

参考サイト

こちらの記事を参考にさせていただきました。
▼grid-template-columns - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns

▼scroll-snap-type - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type