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' %}">

bootstrap 輪播圖使用