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:

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:

  
 
1
 
2
 
3
 
4
 
5
 

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:

  
 
1
 … 
  
 
  
 
  
 … 
  
 
 
　

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:

  
 
1
 … 
  
 
   
 
图片标题
 
描述内容...
 
 
 … 
 

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:

  
 … 
  
 … 
        

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!