シンプルなjQueryスライダーを構築する方法

<code> <link href = " https:> HTMLドキュメントのタグ。ご覧のとおり、CDN URLから必要なファイルをロードしました。プロジェクトのためにこれらのファイルをダウンロードした場合は、各ファイルに正しいパスを提供する必要があります。 </p> <h3 id="このセクションでは-Carouselコンテンツを設定します">このセクションでは、Carouselコンテンツを設定します</h3> <p>、HTMLファイルでCarouselコンテンツを設定する方法を学びます。 </p> <p>次のコードスニペットを見てみましょう。 </p> <pre class="brush:php;toolbar:false"> <code> <div class="slider"> <br> <h2 id="スライド">スライド</h2> <h2 id="スライド">スライド2 </h2> <h2 id="カルーセルが初期化されたとき-上記のコードスニペットでは-CSSクラスがメイン-code-div-要素で使用されていることに注意してください-現在-code-slider-code-をCSSクラスとして使用しているため-BXSLiderのセットアッププロセスでこの値を使用します-p-もちろん-テキストだけでなく-何でも使用できます-次のセクションでこれに戻ります-全体像のカルーセルを構築する方法を説明します-これで-メイン-code-div-要素で提供するCSSクラスを書き留める必要があります-p-私たちのカルーセルは-生のHTMLのみを使用して見栄えがよくないため-タイトルの背景-フォントサイズ-テキストアラインメントを指定するためにいくつかの追加のCSSを追加します-p-pre-body-br-マージン-px-auto-font-family-lato-br-font-weight-br-br-gt-背景-オレンジ-br-font-size-rem-br-line-height-br-マージン-br-br-pre-h-Bxsliderを初期化-h-p-これまでのところ-必要なライブラリファイルを含めて-カルーセル用のHTMLコンテンツをセットアップしました-残っている唯一のことは-bxsliderを初期化して-静的HTMLコンテンツを美しく見えるロータリーカルーセルに変換することです-p-p-カルーセルを初期化するコードスニペットを見てみましょう-p-pre-br-document-ready-function-br-slider-bxslider-br-br-pre-p-これはjavaScriptコードです-または-HTMLファイルの下部にある-code-code-タグの真上に配置して-ページが読み込まれた後にJavaScriptを実行することもできます-code-script-script-code-タグに入れたい場合は-必要なJavaScriptとCSSファイルがロードされた後に配置する必要があります-p-p-ご覧のとおり-code-slider-code-cssクラスを使用してカルーセルを初期化します-p-p-これら-つの簡単な手順を通じて-jQueryベースのBXSLiderライブラリを使用してレスポンシブカルーセルを構築します-カルーセルの実際の効果を示すコードペンのデモは-p-p-iframe-approakfullscreen-frameborder-no-https-exroeweed-eed-eedpule-iframe-p-p-次のセクションでは-これまでに説明したことに拡張し-BXSLiderライブラリが提供するさまざまな構成オプションを使用してCarouselを構築しようとします-p-h-実用的な例を作成する">カルーセルが初期化されたとき。上記のコードスニペットでは、CSSクラスがメイン<code> <div> 要素で使用されていることに注意してください。現在、<code> slider </code>をCSSクラスとして使用しているため、BXSLiderのセットアッププロセスでこの値を使用します。 <p>もちろん、テキストだけでなく、何でも使用できます。次のセクションでこれに戻ります。全体像のカルーセルを構築する方法を説明します。これで、メイン<code> <div> 要素で提供するCSSクラスを書き留める必要があります。 <p>私たちのカルーセルは、生のHTMLのみを使用して見栄えがよくないため、タイトルの背景、フォントサイズ、テキストアラインメントを指定するためにいくつかの追加のCSSを追加します。 </p> <pre class="brush:php;toolbar:false"> body {<br> マージン：20px auto; font-family： 'lato'; <br> font-weight：300; <br> /br>背景：オレンジ; <br> font-size：6rem; <br> line-height：3; <br> マージン： 0; <br> } <br>

Bxsliderを初期化

これまでのところ、必要なライブラリファイルを含めて、カルーセル用のHTMLコンテンツをセットアップしました。残っている唯一のことは、bxsliderを初期化して、静的HTMLコンテンツを美しく見えるロータリーカルーセルに変換することです！

カルーセルを初期化するコードスニペットを見てみましょう。

 <br> $（document）.ready（function（）{<br> $（'。slider '）。bxslider（）; <br>}）; <br>  

これはjavaScriptコードです。または、HTMLファイルの下部にある タグの真上に配置して、ページが読み込まれた後にJavaScriptを実行することもできます。 <script> </script>タグに入れたい場合は、必要なJavaScriptとCSSファイルがロードされた後に配置する必要があります。

ご覧のとおり、 slider cssクラスを使用してカルーセルを初期化します。

これら3つの簡単な手順を通じて、jQueryベースのBXSLiderライブラリを使用してレスポンシブカルーセルを構築します！カルーセルの実際の効果を示すコードペンのデモは、

次のセクションでは、これまでに説明したことに拡張し、BXSLiderライブラリが提供するさまざまな構成オプションを使用してCarouselを構築しようとします。

実用的な例を作成する

前のセクションでは、BXSLiderライブラリを使用して基本的なカルーセルをセットアップする方法について説明しました。このセクションでは、ウェブサイトの回転画像カルーセルを構築する方法を示す実用的な例を紹介します。

ドキュメントのルートディレクトリに、次のコードスニペットを含むHTMLファイルを作成します。

  <br>   <br>  <link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css%20<br>%20</br>%20<div%20class%20=%20" slider> <br>  <div> <img  src="https://img.php.cn/upload/000/000/000/000/174162355471357.jpg" alt="シンプルなjQueryスライダーを構築する方法" >  </div> <br>  <div> <img  src="https://img.php.cn/upload/000/000/000/000/174162355685315.jpg%20" tittle="" stationer a coffee mug alt="シンプルなjQueryスライダーを構築する方法" >  </div> <br>  <br>  <br> $（'。Slider '）。bxslider（{<br> autocontrols：true、<br> auto：true、<br> pager：true、<br> slidewidth：600、<br>モード：<br>キャプション：true、<br> speed：1000 <br>}）; <br> <br> <br> <br> <br> <br>スライドは次のようになります： <p> <iframe approakfullscreen="true" frameborder="no"    style="max-width:90%" loading="lazy" src="https://codepen.io/tutsplus/embed/lyredza?default-tab%20=%20result&editable%20=%20true&theme-id=light" width="850"> </iframe></p> <p>上記の例のコードは馴染みがあります。それは私たちがすでに議論したものと非常に似ています。唯一の違いは、BXSLiderライブラリでサポートされているいくつかの構成オプションでCarouselを初期化することです。このコードスニペットを詳しく見てみましょう。 </p> <pre class="brush:php;toolbar:false"> $（'。Slider '）。bxslider（{<br>  autocontrols：true、<br>  auto：true、<br>  pager：true、<br> slidewidth：600、<br>  <br> <br> <br> <br> <br> >}）; <br>  

autocontrolsパラメーター

autocontrolsパラメーターは、コントロールを追加して、ユーザーがスライドを開始および停止できるようにします。デフォルトでは、falseに設定されているため、コントロールを表示する場合は、明示的にTrueに設定する必要があります。

自動パラメーター

Autoパラメーターを使用すると、ページが読み込まれているときにスライドを自動的に開始できます。デフォルトでは、falseに設定されています。

ページャーパラメーター

ページャーパラメーターは、スライドにページャーを追加します。

SlideWidthパラメーター

スライド幅パラメーターを使用すると、スライドの幅を設定できます。このパラメーターは、スライドショーに水平オプションを使用する場合に必要です。

モードパラメーター

モードパラメーターを使用すると、スライド間の遷移のタイプを構成できます。あなたが選択できる3つのオプションがあります - 水平、垂直、フェード。上記の例では、フェードインオプションを使用したため、あるスライドから別のスライドに切り替えると、フェードイン効果が表示されます。

キャプションパラメーター

キャプションパラメーターが使用されます。各スライドのタイトルを表示したい場合。タイトルは、画像要素のタイトル属性から取得されます。ご覧のとおり、例のすべての画像にタイトル属性を提供します。

速度パラメーター

速度パラメーターを使用すると、スライド遷移時間を構成し、ミリ秒単位で設定できます。この例では、1000に設定するため、スライドは1秒あたり1回回転します。

BXSLiderには他にも多くの構成オプションがあります。公式のBXSLiderオプションのドキュメントでそれらについて学ぶことができます。 BXSLiderライブラリで利用可能なさまざまなオプションを引き続き検討してください。また、JavaScriptコールバックメソッドを使用する多くのカスタム可能性も提供します。

結論

今日、jqueryライブラリを使用して基本的なカルーセルをセットアップする方法について説明しました。デモンストレーションのために、jQueryライブラリに基づいたBXSLiderライブラリを選択しました。また、BXSLiderライブラリが提供するさまざまな構成オプションを使用して、実用的な例を作成しました。