De quelles trois parties se compose le carrousel d'images bootstrap ?

Une image de carrousel se compose principalement de trois parties :

☑ Image de carrousel

☑ Compteur d'images de carrousel

☑ Contrôleur pour carrousel images

Première étape : concevoir un conteneur pour les images de carrousel. Utilisez le style carrousel dans le framework Bootstrap et définissez une valeur d'ID pour ce conteneur, afin que l'attribut data puisse être utilisé ultérieurement pour déclarer le déclencheur.

Le code est le suivant :

<div id="slidershow" class="carousel"></div>

Étape 2 : Concevoir un compteur d'images carrousel. Ajoutez un calculateur d'images carrousel à l'intérieur du conteneur div.carousel, en utilisant le style carrousel-indicators. Sa fonction principale est d'afficher l'ordre de lecture des images actuelles (s'il y a plusieurs images, placez plusieurs li). liste séquentielle :

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

Étape 3 : Concevez la zone de lecture de l'image du carrousel. Dans tout l'effet des images carrousel, la zone de lecture est la zone la plus critique. Cette zone est principalement utilisée pour placer les images qui doivent être pivotées. Cette zone est contrôlée à l'aide du style carrousel-inner, et elle est également placée dans le conteneur du carrousel, et chaque image du carrousel est placée via le conteneur d'éléments :

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 </div>
 </div>
</div>　

Recommandations associées : "Tutoriel de démarrage de BootStrap 》

Étape 4 : Définissez la description de l'image du carrousel. De nombreux effets d'image du carrousel ont également leurs propres titres et descriptions pour chaque image. En fait, Carousel dans le framework Bootstrap fournit également des effets similaires. Ajoutez simplement le code correspondant en bas de l'image dans l'élément :

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3>图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

Étape 5 : Concevez le contrôleur d'image du carrousel. Souvent, les carrousels ont également un contrôleur avant et arrière. Ceci est réalisé dans Carousel grâce au style de contrôle de carrousel combiné avec la gauche et la droite. Parmi eux, gauche signifie jouer en avant et droite signifie jouer en arrière. Il est également placé dans le conteneur carrousel :

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

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!