Home > Article > Web Front-end > The bootstrap framework implements code for automatic carousel images

The bootstrap framework implements code for automatic carousel images

yuliaOriginal: 2018-10-19 11:49:287321browse

Have you noticed when browsing the website that almost every website has a carousel image on the homepage? As a front-end developer, will you use the bootstrap framework to write an image carousel? This article will share with you the code for automatic carousel in the bootstrap framework. It has certain reference value. Interested friends can take a look.

Before using the bootstrap framework layout, you must first introduce the relevant jQuery, CSS, and JS files. If you are unclear, you can read my previous article, How to use the bootstrap framework in HTML pages , or refer to Bootstrap Tutorial.

bootstrap’s code to implement automatic carousel chart is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>  
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="myCarousel" class="carousel slide" style="width: 500px;" data-ride = "carousel" data-interval="1000">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner" >
    <div class="item active">
     <img src="img/aaa1.jpg" alt="First slide">
    </div>
    <div class="item">
     <img src="img/aaa2.jpg" alt="Second slide">
    </div>
    <div class="item">
     <img src="img/aaa3.jpg" alt="Third slide">
    </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    
   </a>
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    
   </a>
  </div> 
 </body>
</html>

The function of the label: You can use the mouse to click on the left side of the picture to view the previous picture, and click on the right side of the picture to view the next picture.

Add data-ride = "carousel" data-interval="1000" to the outermost div to achieve the effect of automatic carousel of images. Data-interval can set the speed of carousel. For example, use 1000 milliseconds, one second equals one thousand milliseconds.

You can modify the style of the carousel according to your own needs, such as the image switching speed, etc.

The effect is as shown in the picture:

The bootstrap framework implements code for automatic carousel images

The above has shared with you the code of the bootstrap framework to implement image carousel. It is relatively simple. If you are not sure, you can Visit the official website of the bootstrap framework: http://v3.bootcss.com. I hope this article will be helpful to you! For more related tutorials, please visit Bootstrap Online Manual

The above is the detailed content of The bootstrap framework implements code for automatic carousel images. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pure JS implements the code for clicking the button to return to the top of the pageNext article：Pure JS implements the code for clicking the button to return to the top of the page

See more

The bootstrap framework implements code for automatic carousel images

Related articles