How to implement Bootstrap image carousel effect-JS Tutorial-php.cn

How to implement Bootstrap image carousel effect

PHPz

Release： 2018-10-15 16:28:12

Original

2879 people have browsed it

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>

Copy after login

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>

Copy after login

enter image description here

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!