Javascriptを使用したカルーセル

| | | | | | | | | | | | | | | | | | | | | | |

メリーゴーランドについて考えるとき、私たちは通常、子供の頃に行った可能性のある遊園地のメリーゴーランドを思い浮かべます。これは、カラフルなメリーゴーランドの馬が上下に動く大きな回転プラットフォームです。あなたが行くように。メリーゴーランドが進むにつれて。

ブートストラップライドは、私たちが子供として学んだ見本市会場の種類ではありませんが、コンセプトにはいくつかの類似点があります。この記事では、Bootstrapの使用を開始する方法、カルーセルUI要素とは何か、いつ使用する必要があるか、およびBootstrapフレームワークを使用してカルーセルUI要素を作成する方法について説明します。

はじめに

ブートストラップカルーセルを設定するために最初に行う必要があるのは、正しい依存関係があることを確認することです。このためには、Bootstrap、PopperJS、jQueryが必要です。 ブートストラップクイックスタートにアクセスして、依存関係をプロジェクト。

依存関係の要件を処理する方法はあなた次第ですが、最も簡単で初心者に優しい方法は、コンテンツ配信ネットワークを使用することです。 CDN-jQuery、Popper.js、およびBootstrap用。

上記のコードスニペットでソートされたリストは次のとおりです1つのフラグ。 .activeクラスは、 carousel-itemsのアクティブクラスに対応します。

結論

最初は、これは消化する情報がたくさんあるように見えるかもしれません。覚えておくべき主なことは、ドキュメントに従うことです。ドキュメントが非常によく書かれていて詳細である場合、それを行う方法を覚えておく必要はありません。

Bootstrapですべてがどのように機能するかを知ることは間違いなく良い考えです-これらの縮小されたCSSとJSをチェックしてくださいBootstrapでスタイルとスクリプトの要素がどのように見えるかを確認する時間があれば。 、少なくともサンプルコードのすべての属性の意味を覚えておいて、ニーズに合わせてプロジェクトで使用できるようにしてください。

最後に、次の点に注意してください。カルーセルコンポーネントは、アクセシビリティの観点から使用するのに最適ではない可能性があります。ページを可能な限りアクセスしやすくし、他の場所にない情報をカルーセルで使用しないようにしてください。

Bootstrapのユーザージャーニーを続けて頑張ってください!