CSSのみのカルーセル

Carousel/Slideshowを構築するときにHTMLとCSSがあなたをどれだけ遠くに連れて行くかは驚くべきことです。

1. CSS FlexBoxを使用して、いくつかのボックスを水平列に設定するのは簡単です。
2. オーバーフローで一度に1つのボックスのみを表示し、オーバークロールビハビオリスを簡単にスワイプできるようにします。
3. 「スライド」をスクロールスナップタイプでうまく並べることができます。
4. いくつかの＃ジャンプリンクは、ナビゲーションを作成するために必要なすべてです。これにより、スクロールビハビオールですべてを素晴らしくスムーズにすることができます。

Christian Schaeferは、次のボタンと以前のボタンに加えて、インタラクションが開始されると再生を停止する自動プレイ機能で、もう少しさらに進んでいます。

その自動プレイについて - それは真正なCSSトリックです：

1. 最初に、スクロールスナップポイントを右にゆっくりとオフセットし、スナップされたため、スクロール領域をフォローします。
2. スライド全体の幅をスクロールした後、スナップを無効にします。スクロール領域は、スクロールスナップポイントから解き放たれます。
3. 今、私はスクロールスナップポイントを最初の位置に戻させました。
4. 次に、スクロール領域を別のスナップポイントにスナップできるようになったスナップを再びエンゲージしますか？

いいね。

JavaScriptを搭載したスライドショー（たとえば、Flickty）も本当にいいことです。コードが非常に少ないことでそれを成し遂げることについては、きちんとしたことがあります。

そして、HTMLとCSSでどこまで到達できるかについて言えば、ここに画像カルーセルとギャラリーに関するいくつかの関連するテイクがあります。

• CSSのみのカルーセルの作り方（Robin Rendle）
• ReactとCSSグリッドを使用して無限のスクロール画像ギャラリーを構築する方法（DigitalOcean）
• JavaScript Navigation（Maks Akymenko）で強化された超柔軟なCSS Carousel
• カルーセルは複雑である必要はありません（Chris Coyier）

以上がCSSのみのカルーセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。