on:2020年1月15日sponsorsカルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。Carousel下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。カルーセルをCSSのみで実装するテクニックのまとめカルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。実装のポイントは、下記の通りです。スライダーの各パネルは、Flexboxで横一列に設定します。パネルを1つだけ表示するにはオーバーフローを使用し、-webkit-overflow-scrollingでスワイプできるようにします(iOSのみ)。scroll-snap-typeを使用すると、スライドをうまく整列させることができます。scroll-snapプロパティの基礎知識と便利な使い方ナビゲーションのリンクは#jump-linksを使うだけで、スムーズなスクロールはscroll-behaviorで実装します。実際の動作は、下記のデモでご覧ください。CodePen.コードは、下記の通りです。Schaeferのカルーセルは次へボタンと前へボタンに加えて、自動再生機能も備えています。HTMLとCSSのみで実装されています。CodePen.CSSで実装する自動再生機能に注目してみましょう。スクロールのスナップポイントをゆっくりと右にオフセットします。スナップされているため、スクロールエリアが追従します。スライド全体の幅をスクロールした後、スナップを無効にします。これでスクロールエリアはスナップポイントから解放されます。次に、スナップポイントを元の位置にジャンプさせ、スクロールエリアをスナップドラッグせずに戻します。最後に、スナップを再度有効にして、スクロールエリアを別のスナップポイントにスナップできるようにします🤯クールですね!コードは、下記の通りです。fill='%23fff'/%3E%3C/svg%3E");}ボーナスとして最後に、JavaScriptを少しだけ加えたものを紹介します。カルーセルはHTMLとCSSのみで実装できますが、ほんの少しだけJavaScriptを加えると更に高性能なもの(Flickity)が実装できます。CodePen.コードは、下記の通りです。実装には外部ファイルが必要です。