検索

ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

青灯夜游
青灯夜游転載
2021-12-02 19:04:054191ブラウズ

この記事では、Bootstrap の画像カルーセルについて説明し、Carousel 画像カルーセル コンポーネントの使用方法を紹介します。

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

1 カルーセル コンポーネント

カルーセル (カルーセル) は、要素、画像、またはテキスト スライド (カルーセルなど) を表示するために使用されるスライド ショー コンポーネントです。

カルーセルは、css3d 変換と少しの JavaScript を使用して構築された、一連のコンテンツをループするスライドショーです。さまざまな画像、テキスト、カスタム マークアップを処理できます。また、前/次のコントロールとインジケーターのサポートも含まれています。 [関連する推奨事項: "bootstrap チュートリアル "]

ページ表示 API をサポートするブラウザーでは、ユーザーが Web ページを表示できないとき (たとえば、ブラウザーのタブが非アクティブで、ブラウザー ウィンドウが表示されない)最小化など)、カルーセルがスライドするのを防ぎます。

カルーセルはスライドのサイズを自動的に正規化しません。したがって、コンテンツのサイズを適切に変更するには、追加のユニバーサル カテゴリまたはカスタム スタイルを使用する必要がある場合があります。カルーセルは前/次のコントロールとインジケーターをサポートしていますが、必須ではありません。必要に応じて追加およびカスタマイズできます。

2 さまざまな形式のカルーセルの例

2.1 スライドのみのカルーセル

これはスライドのみのカルーセルです。ブラウザのデフォルトの画像配置を避けるため、カルーセル画像に .d-block と .w-50 が存在することに注意してください。 次のコードは、5 秒ごとに画像を変更します。 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>轮播</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
        <div>
        <div class="carousel-item active">
        <img src="../pic/3.jpg" class="d-block w-100" alt="...">
        </div>
        <div>
        <img src="../pic/4.jpg" class="d-block w-100" alt="...">
        </div>
        <div>
        <img src="../pic/6.jpg" class="d-block w-100" alt="...">
        </div>
        </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

2.2 前と次のコントロールを移動する

前と次のコントロールを追加します。 button 要素の使用をお勧めしますが、role="button" を指定して a 要素を使用することもできます。画像のサイズと幅を設定するには、カルーセル コンテナーのサイズを設定する必要があることに注意してください。コンテナーを満たすには、画像の設定を w-100 に設定する必要があります。そうしないと、次の画像が表示されない可能性があります。 

  <div id="carouselExampleControls" class="carousel slide w-50" data-bs-ride="carousel">
        <div class="carousel-inner">
        <div class="carousel-item active">
        <img src="../pic/3.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="../pic/4.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="../pic/6.jpg" class="d-block w-100" alt="...">
        </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
        </button>
        </div>

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

図の両側にある大なり記号と小なり記号は、前と次のコントロールです。

2.3 インジケーター付き

インジケーターは、下の図の 3 本の白い横バーです。クリックすると、対応する図に直接切り替わります。 

<div id="carouselExampleIndicators" class="carousel slide w-50" data-bs-ride="carousel">
            <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
            <div class="carousel-item active">
            <img src="../pic/3.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
            <img src="../pic/4.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
            <img src="../pic/6.jpg" class="d-block w-100" alt="...">
            </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
            </button>
            </div>

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

2.4 字幕あり

任意のカルーセル項目で carousel-caption を使用して、スライドに字幕を追加します。オプションで、以下に示すように、表示ジェネリック クラスを使用して小さなビューポートで簡単に非表示にすることができます。最初は d-none で非表示になり、中型のデバイスでは d-md-block を使用して再表示されます。 

  <div id="carouselExampleCaptions" class="carousel slide w-50" data-bs-ride="carousel">
                <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                <div class="carousel-item active">
                <img src="../pic/3.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>第一个幻灯片</h5>
                  <p>一枝红艳露凝香，云雨巫山枉断肠。<br>——唐代李白的《清平调·其二》</p>
                </div>
                </div>
                <div class="carousel-item">
                <img src="../pic/4.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>第二个幻灯片</h5>
                  <p>南国有佳人，容华若桃李。<br>——汉曹植的《杂诗七首·其四》</p>
                </div>
                </div>
                <div class="carousel-item">
                <img src="../pic/6.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>第三个幻灯片</h5>
                  <p>云想衣裳花想容，春风拂槛露华浓。<br>
                      ——唐代李白的《清平调·其一》</p>
                </div>
                </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
                </button>
                </div>

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

2.5 フェードインとフェードアウト

スライド アニメーション効果の代わりにフェードインとフェードアウトを使用するには、カルーセル コンテナーにカルーセル フェードを追加します。 最後の 2 つを含め、この部分はすべてパラメータの問題であるため、説明しません。 

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">

2.6 時間間隔の設定

carousel-item に data-bs-interval="" を追加して、次の項目に自動的にループする遅延時間を変更します。 このパラメータは覚醒項目ごとに設定する必要があり、時間単位はミリ秒、設定間隔が5秒の場合は5000回となります。以下は設定間隔10秒です。 

<div class="carousel-item active" data-bs-interval="10000">

2.7 タッチ切り替えを無効にする

カルーセル コンポーネントは、スライド間を移動するためのタッチ スクリーン デバイスでの左/右スワイプをサポートしています。これは、data-bs-touch 属性を使用して無効にすることができます。以下の例には data-bs-ride 属性が含まれておらず、data-bs-interval="false" が設定されているため、自動再生されません。 

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">

2.8 ダーク バリアント

カルーセルに carousel-dark を追加して、ダーク コントロール、インジケーター、字幕を取得します。コントロールは、CSS プロパティ フィルターによってデフォルトの白塗りから反転されています。字幕とコントロールには、色と背景色をカスタマイズするための追加変数があります。

22.2.4 の例をとり、効果を確認する例として carousel-dark を追加してみましょう 

<div id="carouselExampleCaptions" class="carousel carousel-dark slide w-50" data-bs-ride="carousel">

Bootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょう

選択した画像自体の色が変化するため、ちょっと暗いのでこのエフェクトを使います いいえ、明るい色の写真のほうが見栄えがしますので、ぜひ試してみてください。

ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！

以上がBootstrap のさまざまな画像カルーセル効果について 1 つの記事で学びましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css bootstrap Filter 循环 display viewport background
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Bootstrap で Card コンポーネントを使用する方法の詳細な説明次の記事：Bootstrap で Card コンポーネントを使用する方法の詳細な説明

関連記事

続きを見る