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

更新日 : 2021.04.04

Share
0
0
9
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するには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. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選