Comment faire du carrousel bootstrap

Pour créer un graphique de carrousel bootstrap, effectuez les étapes suivantes: Créez un conteneur parent avec la classe de carrousel. Ajoutez la diapositive, utilisez la classe de carrousel-item pour ajouter la classe active à la première diapositive. (Facultatif) Ajouter un indicateur pour ajouter un élément OL avec la classe de carrousel-indicateurs à l'intérieur du conteneur. (Facultatif) Ajouter des commandes, ajouter des boutons avec des classes de carrousel-control-prev et de carrousel-control-next dans le conteneur. (Facultatif) Initialisez le graphique du carrousel avec JavaScript pour activer la lecture automatique, les minuteries et les indicateurs.

Comment créer un carrousel bootstrap

Un carrousel est une collection d'images ou de diaporamas qui sont automatiquement affichées dans un intervalle de temps spécifié. Bootstrap fournit une classe simple qui vous permet de créer facilement des diagrammes de carrousel dans les pages Web.

Étape 1: Créer un conteneur

Créez un conteneur parent avec carousel :

 <code class="html"><div class="carousel">
<p> <strong>Étape 2: Ajouter des diapositives</strong></p>
<p> Ajoutez des diapositives dans le conteneur, utilisez <code>carousel-item</code> :</p>
<pre class="brush:php;toolbar:false"> <code class="html"><div class="carousel-item active"> <img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> </div> <div class="carousel-item"> <img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> </div></code>

Ajoutez la classe active à la première diapositive et elle sera affichée sous forme de diapositive initiale.

Étape 3: Ajouter un indicateur (facultatif)

L'indicateur affiche les diaporamas actuels et potentiels dans le diagramme du carrousel. Ajoutez un élément ol avec une classe carousel-indicators à l'intérieur du conteneur:

 <code class="html"><ol class="carousel-indicators"> <li data-target=".carousel" data-slide-to="0" class="active"> <li data-target=".carousel" data-slide-to="1"> </ol></code>

Étape 4: Ajouter des contrôles (facultatif)

Le contrôle permet à l'utilisateur de naviguer manuellement dans le diagramme du carrousel. Ajoutez des boutons avec des classes carousel-control-prev et carousel-control-next à l'intérieur du conteneur:

 <code class="html"><a class="carousel-control-prev" href=".carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">上一张</span> </a> <a class="carousel-control-next" href=".carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">下一张</span> </a></code>

Étape 5: Initialiser la carte du carrousel (facultatif)

Initialisez le graphique du carrousel avec JavaScript pour activer la lecture automatique, les minuteries et les indicateurs.

 <code class="javascript">$('.carousel').carousel({ interval: 5000 // 自动播放的间隔时间（毫秒） });</code>

Finition

Ces étapes créent un carrousel bootstrap réactif avec la lecture automatique, les indicateurs et les contrôles.