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

The bootstrap framework implements code for automatic carousel images

yulia
Release: 2018-10-19 11:49:28
Original
7354 people have browsed it

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>
Copy after login

    The function of the label: display multiple circles in the carousel chart, prompting how many pictures there are in total, and the current Which picture is it.

    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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template