記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。
そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル）です。
スライダーを実装するとき、よく使われるのがSlickやSwiperといったJavaScriptライブラリですが、使わないスタイルやメソッドも多いためサイトの表示速度遅延に影響を及ぼすことも。
今回はJavaScriptを使わずCSSだけでスライダーを作る方法をご紹介します。
デモ
デモとして一度に表示する画像は1枚、横方向のシンプルなスライダーを用意しました。
See the Pen
Untitled by mimihokuro (@mimi_hokuro)
on CodePen.
基本のコード
<div class="slider">
<img src="https://placehold.jp/0aa864/ffffff/600x300.png">
<img src="https://placehold.jp/0aa864/ffffff/600x300.png">
<img src="https://placehold.jp/0aa864/ffffff/600x300.png">
</div>HTMLでは画像にダミー画像生成のplacehold.jpで生成したものを使用したシンプルな構成になっています。
.slider {
display: flex;
gap: 8px;
overflow-x: auto;
max-width: 400px;
width: 100%;
margin: auto;
scroll-snap-type: x mandatory;
}
img {
width: 100%;
scroll-snap-align: center;
}解説
今回は親要素にflexを指定して横並びに、表示域を幅400pxで制限して、はみ出す分はスクロールするようにしています。
追加スタイルその1：scroll-snap-type
ここで指定しているscroll-snap-typeが今回のポイントの1つです。
ところでスクロールスナップとは？という点ですが、MDNではこのように解説しています。
ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる
MDN「CSS スクロールスナップの基本概念」より抜粋
ちょっとこれだけだと分かりづらいですが、特定の位置にピタッと移動（スクロール）させる動作、というと分かりやすいでしょうか？
このscroll-snapのおかげでCSSだけを使ってSwiperやSlickに似た動作をさせることができます。
サンプルコードのscroll-snap-typeには二つの値が指定されていますが、1つ目の値にはスクロールスナップを適用させる方向、2つ目の値にはスナップの度合いを指定します。
まずxがスクロールの方向になり、x軸に沿ったスクロール方向ということになります。
y軸に適用させたいならyを指定する、ということですね。
2つ目の値についてですが、mandatoryかproximityのどちらかを指定することができます。
mandatoryはスナップをSwiperやSlickのような軽い操作感で演出してくれますが、それ故に簡単にスナップしてしまうので、ユーザーが見たい部分が見れずにスナップしてしまうなど、逆にユーザーをイラつかせてしまう可能性もあるので使用には慎重になる必要があります。
proximityは、スナップ地点が近くなるまでスクロールするとスナップされるため、mandatoryに比べて軽い操作感というわけにはいきませんがコンテンツを見逃してしまう可能性は低くなります。
と、つらつらと言葉を並べてきましたが言ってることが分かりづらいかと思いますので、百聞は一見に如かず、こちらのデモで使用感を見てください。
See the Pen
Difference between 〇 and △ by mimihokuro (@mimi_hokuro)
on CodePen.
追加スタイルその2：scroll-snap-align
scroll-snap-alignはどの位置をスナップの基準にするか指定できます。
startはスナップする範囲の先頭に、centerは中央、endは末尾にピタッと移動します。
こちらもデモを用意しました。
スナップ位置が分かりやすいよう、親要素よりも子要素を大きくはみ出した状態に設定しています。
See the Pen
scroll-snap-align by mimihokuro (@mimi_hokuro)
on CodePen.
子要素の表示域を親要素に合わせるならどの値を指定しても問題ありません。
さていかがでしたでしょうか？
CSSにたった2つのスタイルを追加するだけでスライダーがJavaScriptなしで実装できてしまうなんて神かよ、と思いましたね。
この記事が参考になれば幸いです～。
