So implementieren Sie den Bootstrap-Bildkarusselleffekt

Dieser Artikel stellt hauptsächlich den Bootstrap-Bildkarusselleffekt im Detail vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

Einführung

Das Bootstrap-Karussell-Plugin ist eine flexible und reaktionsfähige Möglichkeit, Ihrer Website Schieberegler hinzuzufügen. Darüber hinaus ist der Inhalt flexibel genug und kann aus Bildern, Iframes, Videos oder anderen Arten von Inhalten bestehen, die Sie platzieren möchten.

[Verwandte Videoempfehlungen: Bootstrap-Tutorial]

Beispiel

Das Rad des Folgenden Demonstrationsbild Zum Abspielen verwenden Sie das Karussell im Bootstrap, um das Loop-Play-Element-Plug-in anzuzeigen.

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

Fügen Sie das Bild in src ein und legen Sie die Größe für das Bild fest

Sie können ihm auch einen Titel hinzufügen

<p class="item">
 <img src="..." alt="...">
 <p class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </p>
</p>

Verwandte Empfehlungen:

Ein Beispiel für die Verwendung von JS zur Implementierung eines Bilderkarussells

Methode zur Implementierung des Bildkarusselleffekts

Verwenden Sie JQuery, um einen Bildkarusselleffekt zu erzielen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Bootstrap-Bildkarusselleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!