bootstrap 轮播图使用

1、html

<div id="myCarousel" class="carousel slide">                        <!--设置轮播器区域样式，设置轮播器滚动样式-->
    <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>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">                                    <!--设置轮播器图片区域-->
        <div class="item active tp1">                                <!--设置轮播器图片样式-->
            <a href="#"><img src="{% static 'imgs/banner/b1.jpg' %}" alt="第一张"></a>
        </div>
        <div class="item tp2">
            <a href="#"><img src="{% static 'imgs/banner/b2.jpg' %}" alt="第二张"></a>
        </div>
        <div class="item tp3">
            <a href="#"><img src="{% static 'imgs/banner/b3.jpg' %}" alt="第三张"></a>
        </div>
        <div class="item tp4">
            <a href="#"><img src="{% static 'imgs/banner/b4.jpg' %}" alt="第三张"></a>
        </div>
    </div>

    <!--设置轮播器箭头区域-->
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a href="#myCarousel" data-slide="next" class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>

2、js

<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$('.carousel').carousel({
  interval: 2000
})
</script>

3、css

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

原文地址：https://www.cnblogs.com/fqh202/p/9365341.html