Maison  >  Article  >  interface Web  >  Comment implémenter l'effet carrousel d'images Bootstrap

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

PHPz
PHPzoriginal
2018-05-29 17:42:392837parcourir

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>

enter image description here

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn