【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック

モバイルサイトでよく見かける、横にスライドするカルーセル・スライダー。
最近では単にスライドするだけでなく、フリックしたときに慣性スクロールで動くものが流行っています。
今日はこの『慣性スクロール付きカルーセル』を JavaScript 無しで実装する方法を紹介します。

HTML

ここでは仮に、下記のようなHTMLを用意します。

<ul class="carousel">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS

キモとなるスタイルシートの記述です。

.carousel {
width:100%;
padding:12px 0;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
white-space:nowrap;
}

.carousel li {
background: #fff;
margin: 2px;
text-align: center;
display: inline-block;
}

重要なのは-webkit-overflow-scrolling:touch;の箇所。
これで慣性スクロールが実現します。

DEMO

簡単なサンプルを用意しましたので実際の挙動をご確認ください。

CSS3 CAROUSEL : https://on-ze.com/demo/css3-carousel/

モバイル端末での閲覧を推奨。

左右のフリック操作で要素がスライドします。
ぜひお試しください。