HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。
Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。

サイトのキャプチャ

CSS-Only Carousel


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

カルーセルをCSSのみで実装するテクニックのまとめ

カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。
実装のポイントは、下記の通りです。

  1. スライダーの各パネルは、Flexboxで横一列に設定します。
  2. パネルを1つだけ表示するにはオーバーフローを使用し、-webkit-overflow-scrollingでスワイプできるようにします(iOSのみ)。
  3. scroll-snap-typeを使用すると、スライドをうまく整列させることができます。
    参考: scroll-snapプロパティの基礎知識と便利な使い方
  4. ナビゲーションのリンクは#jump-linksを使うだけで、スムーズなスクロールはscroll-behaviorで実装します。
    参考: CSSでページをアニメーションでスクロールさせる「Scroll-behavior」

実際の動作は、下記のデモでご覧ください。

See the Pen
Real Simple Slider
by Chris Coyier (@chriscoyier)
on CodePen.

コードは、下記の通りです。

Christian Schaeferのカルーセルは次へボタンと前へボタンに加えて、自動再生機能も備えています。もちろん、HTMLとCSSのみで実装されています。

See the Pen
A CSS-only Carousel Slider
by Christian Schaefer (@Schepp)
on CodePen.

CSSで実装する自動再生機能に注目してみましょう。

  1. まず、スクロールのスナップポイントをゆっくりと右にオフセットします。スナップされているため、スクロールエリアが追従します。
  2. スライド全体の幅をスクロールした後、スナップを無効にします。これでスクロールエリアはスナップポイントから解放されます。
  3. 次に、スナップポイントを元の位置にジャンプさせ、スクロールエリアをスナップドラッグせずに戻します。
  4. 最後に、スナップを再度有効にして、スクロールエリアを別のスナップポイントにスナップできるようにします🤯

クールですね!

コードは、下記の通りです。

ボーナスとして最後に、JavaScriptを少しだけ加えたものを紹介します。カルーセルはHTMLとCSSのみで実装できますが、ほんの少しだけJavaScriptを加えると更に高性能なもの(Flickity)が実装できます。

See the Pen
Flickity - wrapAround
by Dave DeSandro (@desandro)
on CodePen.

コードは、下記の通りです。
実装には外部ファイルが必要です。

sponsors

top of page

©2024 coliss