Comment implémenter l'effet carrousel d'images Bootstrap

Cet article présente principalement en détail l'effet carrousel d'images Bootstrap. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Introduction

Le plugin Bootstrap Carousel est un moyen flexible et réactif d'ajouter des curseurs à votre site. Au-delà de cela, le contenu est suffisamment flexible et peut être des images, des iframes, des vidéos ou tout autre type de contenu que vous souhaitez placer.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Exemple

La roue des éléments suivants image de démonstration Pour jouer, utilisez le carrousel dans le bootstrap pour afficher le plug-in de l'élément de lecture en boucle.

<p id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <p class="carousel-inner" role="listbox">
  <p class="item active">
   <img src="..." alt="...">
   <p class="carousel-caption">
    ...
   </p>
  </p>
  <p class="item">
   <img src="..." alt="...">
   <p class="carousel-caption">
    ...
   </p>
  </p>
  ...
 </p>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</p>

Insérez l'image dans src et définissez la taille de l'image

Vous pouvez également y ajouter un titre

<p class="item">
 <img src="..." alt="...">
 <p class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </p>
</p>

Recommandations associées :

Un exemple d'utilisation de JS pour implémenter un carrousel d'images

Méthode de mise en œuvre de l'effet carrousel d'images

Utilisez JQuery pour obtenir un effet carrousel d'images

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!