Bootstrap教學《Bootstrap廣告輪播加強版》自動產生分頁鈕與變成按鈕

        /廣告輪播的寬度大小/
.coverflow{max-width: 700px;}


.mwt-title-btn{
    bottom: 10px;
}

/標籤按鈕樣式與大小/
.mwt-title-btn li{
    width: 120px;
    height: 60px;
    float: left;
    margin:3px;
    padding: 3px;
    background: rgba(255,255,255,0.6);
    border-radius: 0;
    border: 0;
    text-indent: 0;
}

/正在輪播樣式/
.mwt-title-btn li.active{
    width: 120px;
    height: 60px;
    border-bottom:solid 5px #ec2a45;
    background: rgba(0,0,0,0.6);
    color: #fff;
    margin-top: 3px;
}

<div class=“container coverflow”>
        <div id=“carousel-example-generic” class=“carousel slide” data-ride=“carousel”>
            <!– 若要取消標籤式按鈕，只需將mwt-title-btn拿掉即可 –>
            <ol class=“carousel-indicators mwt-title-btn”></ol>
            <div class=“carousel-inner”>
                <!– 廣告輪播的圖片與連結位置 –>
                <div class=“item”><a href=“http://www.minwt.com/life/11795.html"><img src=“dist/img/01.jpg” alt=“3D列印跨足時尚界”></a></div>
                <div class=“item active”><a href=“http://www.minwt.com/life/11382.html"><img src=“dist/img/02.jpg” alt=“自製「星巴克女神」手機保護殼”></a></div>
                <div class=“item”><a href=“http://www.minwt.com/dc/11774.html"><img src=“dist/img/03.jpg” alt=“SONY QX1拍照不受限”></a></div>
            </div>
            <a class=“left carousel-control” href=“#carousel-example-generic” data-slide=“prev”><span class=“glyphicon glyphicon-chevron-left”></span></a>
            <a class=“right carousel-control” href=“#carousel-example-generic” data-slide=“next”><span class=“glyphicon glyphicon-chevron-right”></span></a>
        </div>
    </div>

<script src=“dist/js/jquery-1.11.0.min.js”></script>
<script src=“dist/js/bootstrap.min.js”></script>
<script type=“text/javascript”>
    $(function(){
        var total = $(‘.carousel-inner div.item’).size();
        var mwt = $(“ol”).index(‘.mwt-title-btn’);
        append_li();


    var left = $('.container').width() - ($('.carousel-indicators li').width()*total);
    if(mwt ==0){
        $(".carousel-indicators").css('left',left);
    }
    function append_li()
    {
        var li = "";
        var get_ac = $( ".active" );
        var ac =  $( ".carousel-inner div" ).index( get_ac );


        for (var i=0; i &lt;= total-1; i++){
            if(i == ac){
                if(mwt == 0){
                    li += "&lt;li data-target='#carousel-example-generic' data-slide-to='"+i+"' class='active'&gt;"+$(".item img").eq(i).attr("alt")+"&lt;/li&gt;"; 
                }else{
                    li += "&lt;li data-target='#carousel-example-generic' data-slide-to='"+i+"' class='active'&gt;&lt;/li&gt;";                 
                }
            }else{
                if(mwt == 0){
                    li += "&lt;li data-target='#carousel-example-generic' data-slide-to='"+i+"' class=''&gt;"+$(".item img").eq(i).attr("alt")+"&lt;/li&gt;";
                }else{
                    li += "&lt;li data-target='#carousel-example-generic' data-slide-to='"+i+"' class=''&gt;&lt;/li&gt;";

                }
            }
        }

        $(".carousel-indicators").append(li);
    }
});

$( window ).resize(function() {
    var total = $('.carousel-inner div.item').size();
    var left = $('.container').width() - ($('.carousel-indicators li').width()*total);
    if(mwt ==0){
        $(".carousel-indicators").css('left',left);
    }
});


</script>