How to implement Bootstrap image carousel effect

This article mainly introduces the Bootstrap image carousel effect in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Introduction

The Bootstrap Carousel plugin is a flexible and responsive way to add sliders to your site. Beyond that, the content is flexible enough and can be images, iframes, videos, or any other type of content you want to place.

【Related video recommendation: Bootstrap tutorial】

Example

The following demonstrates the wheel of the picture To play, use the Carousel in bootstrap to display the loop play element plug-in.

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

Insert the picture in src and set the size for the picture

You can also add a title to it

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

Related recommendations:

Example of using JS to implement image carousel

Method to implement image carousel effect

Use JQuery to achieve image carousel effect

The above is the detailed content of How to implement Bootstrap image carousel effect. For more information, please follow other related articles on the PHP Chinese website!