<code> <link href = " https:> HTMLドキュメントのタグ。ご覧のとおり、CDN URLから必要なファイルをロードしました。プロジェクトのためにこれらのファイルをダウンロードした場合は、各ファイルに正しいパスを提供する必要があります。 </p> <h3 id="このセクションでは-Carouselコンテンツを設(shè)定します">このセクションでは、Carouselコンテンツを設(shè)定します</h3> <p>、HTMLファイルでCarouselコンテンツを設(shè)定する方法を?qū)Wびます。 </p> <p>次のコードスニペットを見てみましょう。 </p> <pre class="brush:php;toolbar:false"> <code> <div class="slider"> <br> <h2>スライド</h2> <h2>スライド2 </h2> <h2>カルーセルが初期化されたとき。上記のコードスニペットでは、CSSクラスがメイン<code> <div> 要素で使用されていることに注意してください?，F(xiàn)在、<code> slider </code>をCSSクラスとして使用しているため、BXSLiderのセットアッププロセスでこの値を使用します。 <p>もちろん、テキストだけでなく、何でも使用できます。次のセクションでこれに戻ります。全體像のカルーセルを構(gòu)築する方法を説明します。これで、メイン<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を?qū)g行することもできます。 <script> </script>タグに入れたい場合は、必要なJavaScriptとCSSファイルがロードされた後に配置する必要があります。

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

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

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

実用的な例を作成する

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

ドキュメントのルートディレクトリに、次のコードスニペットを含む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スライダーを構(gòu)築する方法" >  </div> <br>  <div> <img  src="https://img.php.cn/upload/000/000/000/000/174162355685315.jpg%20" tittle="" stationer a coffee mug alt="シンプルなjQueryスライダーを構(gòu)築する方法" >  </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ライブラリでサポートされているいくつかの構(gòu)成オプションで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に設(shè)定されているため、コントロールを表示する場合は、明示的にTrueに設(shè)定する必要があります。

自動(dòng)パラメーター

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

ページャーパラメーター

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

SlideWidthパラメーター

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

モードパラメーター

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

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

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

速度パラメーター

速度パラメーターを使用すると、スライド遷移時(shí)間を構(gòu)成し、ミリ秒?yún)g位で設(shè)定できます。この例では、1000に設(shè)定するため、スライドは1秒あたり1回回転します。

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

結(jié)論

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