この記事では、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 サイトの他の関連記事を参照してください。

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

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

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

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

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

2.3 インジケーター付き

2.4 字幕あり

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

2.6 時間間隔の設定

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

2.8 ダーク バリアント

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

2.8 ダークバリアント