ランダムな初期画像を備えたフルスクリーンブートストラップカルーセル

この記事では、2つの単純なブートストラップカルーセル拡張機能の構築を示しています。フルスクリーンスライドショーと、ランダム化された初期スライドを備えたカルーセルです。 基本的なカルーセルから始めて、それを強化します。

重要な概念：

フルスクリーンカルーセル：カスタムjQueryを使用して、窓の高さに合わせてカルーセルアイテムの高さを動的に調整し、背景画像と色を設定するように達成されました。 「フルスクリーン」CSSクラスは、バックグラウンドスタイリングを処理します
• ランダム化初期スライド：スライドの総数を決定し、乱数を生成し、「アクティブ」クラスを対応するスライドとインジケーターに適用します。
• 基本的なカルーセルの構築：

ブートストラップは、コアカルーセル構造を提供します。 各画像には、画像の読み込みが失敗した場合、フォールバックの背景色の

属性が含まれています。 javaScriptはカルーセルの初期化を行い、間隔を設定し、一時停止を無効にします：

data-color

フルスクリーンのスライドショーの作成：

<code class="language-html"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="0">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="1">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="2">
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/000/173958517524890.jpg" alt="A Full-screen Bootstrap Carousel with Random Initial Image ">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Image</h5>
      </div>
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
  </div>
  <a class="carousel-control-prev" href="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div></code>

この拡張機能は、カスタムjQuery：

<code class="language-javascript">$('.carousel').carousel({
  interval: 6000,
  pause: false
});</code>

を使用します

およびcss：

このコードは、画像を繰り返し、親コンテナに背景画像と色を設定し、

要素を削除し（背景が使用されるように）、ウィンドウのサイズの高さを調整します。 最初のスライドの

クラスは、よりスムーズな遷移のためにjqueryを介して追加されます。

<code class="language-javascript">let $item = $('.carousel-item');
let $wHeight = $(window).height();

$item.height($wHeight);
$item.addClass('full-screen');

$('.carousel img').each(function() {
  let $src = $(this).attr('src');
  let $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image': 'url(' + $src + ')',
    'background-color': $color
  });
  $(this).remove();
});

$(window).on('resize', function() {
  $wHeight = $(window).height();
  $item.height($wHeight);
});</code>

初期スライドのランダム化：

<code class="language-css">.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}</code>

ロードにランダムなスライドを表示するには、HTMLからハードコードされた<img alt="ランダムな初期画像を備えたフルスクリーンブートストラップカルーセル" >クラスを削除して、このjQueryを追加します。 active

このコードはランダムなスライドを選択し、

クラスを対応するスライドとインジケーターの両方に適用します。 その他のカスタマイズのアイデア：

active

CSSトランジションまたはJavaScriptアニメーションライブラリを使用して、アニメーションエフェクト（フェード、スケール）を追加します。

<code class="language-javascript">let $numberOfSlides = $('.carousel-item').length;
let $currentSlide = Math.floor(Math.random() * $numberOfSlides);

$('.carousel-indicators li').each(function() {
  let $slideValue = $(this).attr('data-slide-to');
  if ($currentSlide == $slideValue) {
    $(this).addClass('active');
    $item.eq($slideValue).addClass('active');
  } else {
    $(this).removeClass('active');
    $item.eq($slideValue).removeClass('active');
  }
});</code>

画像オーバーレイを実装してください。

active

イベントを使用して次のスライド/以前のスライドをランダム化します。

この強化されたアプローチは、より動的で魅力的なカルーセルを提供します。必要なブートストラップCSSとJavaScriptファイルを含めることを忘れないでください。

以上がランダムな初期画像を備えたフルスクリーンブートストラップカルーセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。