Aus welchen drei Teilen besteht das Bootstrap-Image-Karussell?

Ein Karussellbild besteht hauptsächlich aus drei Teilen:

☑ Karussellbild

☑ Karussellbildzähler

☑ Controller für Karussell Bilder

Schritt eins: Entwerfen Sie einen Container für Karussellbilder. Verwenden Sie den Karussellstil im Bootstrap-Framework und definieren Sie einen ID-Wert für diesen Container, damit das Datenattribut später zum Deklarieren des Triggers verwendet werden kann.

Der Code lautet wie folgt:

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

Schritt 2: Entwerfen Sie einen Karussell-Bildzähler. Fügen Sie im Container div.carousel einen Karussell-Bildrechner hinzu, der den Karussell-Indikator-Stil verwendet. Seine Hauptfunktion besteht darin, die Wiedergabereihenfolge der aktuellen Bilder anzuzeigen (platzieren Sie mehrere Li, wenn mehrere Bilder vorhanden sind). Liste:

<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>

Schritt 3: Entwerfen Sie den Karussell-Bildwiedergabebereich. Bei der gesamten Wirkung von Karussellbildern ist der Wiedergabebereich der kritischste Bereich. Dieser Bereich wird hauptsächlich zum Platzieren von Bildern verwendet, die gedreht werden müssen. Dieser Bereich wird mithilfe des Karussell-Innenstils gesteuert und auch im Karussellcontainer platziert. Jedes Karussellbild wird über den Artikelcontainer platziert:

<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>　

Verwandte Empfehlungen: „BootStrap Erste Schritte Tutorial 》

Schritt 4: Legen Sie die Beschreibung des Karussellbilds fest. Viele Karussellbildeffekte haben auch eigene Titel und Beschreibungen für jedes Bild. Tatsächlich bietet Carousel im Bootstrap-Framework auch ähnliche Effekte. Fügen Sie einfach den entsprechenden Code unten im Bild im Element hinzu:

<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>

Schritt 5: Entwerfen Sie den Karussell-Bildcontroller. Oft verfügen Karussells auch über eine Vorwärts- und Rückwärtssteuerung. Dies wird in Carousel durch den Karussell-Steuerungsstil in Kombination mit links und rechts erreicht. Dabei bedeutet links die Vorwärtsbewegung und rechts die Rückwärtsbewegung. Es wird auch in den Karussellbehälter gelegt:

<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>

Das obige ist der detaillierte Inhalt vonAus welchen drei Teilen besteht das Bootstrap-Image-Karussell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!