CSSのみでカルーセルスライダーを実装する

更新日 : 2021.04.04

Share
0
0
10
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。

カルーセルの実際の動きを確認

デモを用意しましたので下でご確認ください。

See the Pen
oNzJvXP
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

コンテンツが横に並んでいて横スクロールが可能です。また、スナップ点を設けてスクロール後コンテンツが中央位置に止まるよう設定してあります。

コードを確認

.wrap {
	scroll-snap-type: x mandatory;
	white-space: nowrap;
	overflow-x: auto;
}

.item {
	scroll-snap-align: center;
	display: inline-block;
	width: 40%;
	white-space: normal;
}

scroll-snap-type: x mandatoryでスナップ方向を指定します。この場合スクロールコンテナの軸は水平(x軸)で、スナップ位置に合わせられます。mandatoryでスクロール中でなければスナップ点にはまる(合わせられる)ようになります。

scroll-snap-align: centerでスナップ位置を中央に指定しています。他にはstartendもあります。

ブラウザ対応

Can I use…

Can I use…

scroll-snap-alignがIEに対応していないのでスナップさせることができませんが横スクロールはできるので大きな問題にはならないと思います。


スクロール時の複雑なアニメーションが必要な場合はJavaScriptを利用した方が良いと思いますが、簡易的なもので良ければCSSでの実装で充分であると思います。スマホ表示時の記事下の関連記事やトップページの記事一覧部分といったスペースを使いたくない箇所で利用できるので検討してみてはいかがでしょうか。

人気記事

  1. 厳選 ! 良質なWebデザインを集めているギャラリーサイト

    もうこれだけでいい!良質なWebデザインを集めているギャラリーサイト18+1選

  2. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  3. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

  4. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  5. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた