Ein Full-Screen-Bootstrap-Karussell mit zufälligem Anfangsbild

Dieser Artikel zeigt, dass zwei einfache Bootstrap-Karussellverlängerungen erstellt werden: eine Vollbilddias und ein Karussell mit einer randomisierten Anfangsrutsche. Wir beginnen mit einem einfachen Karussell und verbessern es dann.

Schlüsselkonzepte:

• Full-Screen-Karussell: Mit benutzerdefiniertem JQuery erreicht, um die Höhe der Karussell-Elemente dynamisch an die Fensterhöhe anzupassen und Hintergrundbilder und Farben einzustellen. Eine CSS-Klasse "Full-Screen" übernimmt Hintergrundstyling.
• Randomisierte Anfangs Folie: bestimmt die Gesamtzahl der Objektträger, erzeugt eine Zufallszahl und wendet dann die "aktive" Klasse auf den entsprechenden Objektträger und die Angabe an.

Bauen des Basis -Karussells:

Bootstrap liefert die Kernkarouselstruktur. Jedes Bild enthält ein data-color Attribut für Fallback -Hintergrundfarbe, wenn das Ladebild des Bildes fehlschlägt:

<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>
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="1"></li>
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173958517524890.jpg"  class="lazy" 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>

JavaScript initialisiert das Karussell, setzt das Intervall und die Behinderung der Pause:

$('.carousel').carousel({
  interval: 6000,
  pause: false
});

Erstellen einer Diashow mit Vollbildschirm:

Diese Verbesserung verwendet benutzerdefinierte jQuery:

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);
});

und CSS:

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Dieser Code iteriert durch Bilder, setzt Hintergrundbilder und Farben in ihren übergeordneten Containern, entzieht die <img alt="Ein Full-Screen-Bootstrap-Karussell mit zufälligem Anfangsbild" > -Elemente (wie die Hintergründe verwendet werden) und passt die Höhen an der Fenstergrößenänderung an. Die active -Kläufe der Anfangs Folie wird über jQuery für glattere Übergänge hinzugefügt.

randomisieren die anfängliche Folie:

Um eine zufällige Folie des Lasts anzuzeigen, die hartcodierte active -Klasse aus der HTML entfernen und diese jQuery hinzufügen:

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');
  }
});

Dieser Code wählt eine zufällige Folie aus und wendet die active -Kläufe sowohl auf die entsprechende Folie als auch auf die Anzeige an.

Weitere Anpassungsideen:

• Animationseffekte (Fade, Skala) mit CSS -Übergängen oder JavaScript -Animationsbibliotheken hinzufügen.
• Bildüberlagerungen implementieren.
• randomisieren Sie die nächsten/vorherigen Folien mit dem Ereignis slide.bs.carousel.

Dieser verbesserte Ansatz bietet dynamischere und ansprechendere Karussells. Denken Sie daran, die erforderlichen Bootstrap -CSS und JavaScript -Dateien einzuschließen.

Das obige ist der detaillierte Inhalt vonEin Full-Screen-Bootstrap-Karussell mit zufälligem Anfangsbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!