Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie den Bootstrap-Bildkarusselleffekt

So implementieren Sie den Bootstrap-Bildkarusselleffekt

PHPz
PHPzOriginal
2018-05-29 17:42:392862Durchsuche

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>

enter image description here

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn