Un carrousel bootstrap complet avec image initiale aléatoire

Cet article montre la construction de deux extensions de carrousel bootstrap simples: un diaporama plein écran et un carrousel avec une diapositive initiale randomisée. Nous allons commencer par un carrousel de base puis l'améliorer.

Concepts clés:

• Carrousel plein écran: réalisé en utilisant jQuery personnalisé pour ajuster dynamiquement les hauteurs des objets de carrousel pour correspondre à la hauteur de la fenêtre et en définissant des images et des couleurs d'arrière-plan. Une classe CSS "plein écran" gère le style d'arrière-plan.
• La diapositive initiale randomisée: détermine le nombre total de diapositives, génère un nombre aléatoire, puis applique la classe "active" à la diapositive et à l'indicateur correspondant.

Construire le carrousel de base:

Bootstrap fournit la structure du carrousel central. Chaque image comprend un attribut data-color pour la couleur d'arrière-plan de secours si le chargement de l'image échoue:

<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 initialise le carrousel, réglant l'intervalle et désactivation de pause:

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

Création d'un diaporama complet:

Cette amélioration utilise JQuery personnalisée:

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

et CSS:

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

Ce code itère à travers des images, définit des images d'arrière-plan et des couleurs sur leurs conteneurs parents, supprime les éléments <img alt="Un carrousel bootstrap complet avec image initiale aléatoire" > (au fur et à mesure que les arrière-plans sont maintenant utilisés) et ajuste les hauteurs sur le redimensionnement des fenêtres. La classe active de la diapositive initiale est ajoutée via jQuery pour les transitions plus lisses.

randomiser la diapositive initiale:

Pour afficher une diapositive aléatoire sur la charge, supprimez la classe active codée en dur du HTML et ajoutez cette jQuery:

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

Ce code sélectionne une diapositive aléatoire et applique la classe active à la diapositive et à l'indicateur correspondant.

Idées de personnalisation supplémentaires:

• Ajouter des effets d'animation (fondu, échelle) à l'aide de transitions CSS ou de bibliothèques d'animation JavaScript.
• Implémentez les superpositions d'image.
• randomiser les diapositives suivantes / précédentes à l'aide de l'événement slide.bs.carousel.

Cette approche améliorée fournit des carrousels plus dynamiques et engageants. N'oubliez pas d'inclure les fichiers Bootstrap CSS et JavaScript nécessaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!