How to implement carousel chart in bootstrap? Introduction to the implementation method of bootstrap carousel chart-JS Tutorial-php.cn

How to implement carousel chart in bootstrap? Introduction to the implementation method of bootstrap carousel chart

不言

Release： 2018-10-19 10:23:25

Original

4913 people have browsed it

Carousel images are indispensable in every website, and they are basically the most conspicuous place on the homepage of the website. There are many ways to implement carousel images. Today’s article will introduce them to you. Let’s take a look at the implementation method of bootstrap carousel chart, friends who are interested can take a look.

First let’s take a look at a plug-in: Bootstrap Carousel (Carousel) plug-in

Bootstrap Carousel (Carousel) plug-in is a flexible responsive add-on to the site Slider way. Beyond that, the content is flexible enough and can be images, iframes, videos, or any other type of content you want to place.

So, to implement the bootstrap carousel chart, we need to use the Bootstrap carousel (Carousel) plug-in. Let’s take a look at a specific bootstrap carousel chart implementation example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap轮播图</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（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="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div> 
</body>
</html>

Copy after login

Note: If you want to reference the functionality of this plug-in separately, you need to reference carousel.js. Alternatively, you can reference bootstrap.js or a minified version of bootstrap.min.js.

This article ends here. For more exciting information, you can pay attention to the bootstrap tutorial column on the php Chinese website! ! !

The above is the detailed content of How to implement carousel chart in bootstrap? Introduction to the implementation method of bootstrap carousel chart. For more information, please follow other related articles on the PHP Chinese website!