網頁開發 網頁設計

Bootstrap教學-Carousel廣告輪播全面進化(滿版/自動產生圓鈕/單則隱藏控制鈕)

2016/08/17

梅問題-Bootstrap教學-Carousel廣告輪播強化(全版+自動產生圓鈕+單則隱藏控制鈕)

  Bootstrap中內建了許多特效,而讓梅干最使用到的就是它的廣告輪播系統,不但簡單好用且容易自行擴充,而先前也分享過利用CSS來實現全版式的廣告輪播,雖然說很方便,但卻有比例上的問題,因此在等比縮放時,則會造成下方的控制鈕超出一個頁面,而這與一般的全版式廣告還是有點落差,因此最近梅干就找了點資料,並將先前的幾個特點一併作了擴充,讓這個廣告輪播,不但支援全版廣告外,同時當只有一筆時會自動隱藏控制鈕,以及自動偵測廣告數量,並產生控制的小圓鈕,因此有在使用Bootstrap的朋友們,現在也一塊來看看,如何讓Bootstrap的廣告輪播更進化,現在也一塊來看看囉!


Step1
加入CSS樣式:
.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.item>a{
    display: block;
    height: 100%;
}

Step2
加入HTML廣告輪播碼,可直接從item中設定啟始值。
<div id=“mycarousel” class=“carousel slide” data-ride=“carousel”>
    <ol class=“carousel-indicators”></ol>
    <!– 廣告輪播列表 –>
      <div class=“carousel-inner” role=“listbox”>
        <div class=“item”>
            <a href=“http://www.minwt.com">
                <img src=“https://unsplash.it/2000/1250?image=001" data-color=“#eee”>
                <div class=“carousel-caption”>
                    <h3>廣告輪播1</h3>
                </div>
            </a>
        </div>
        <div class=“item”>
            <img src=“https://unsplash.it/2000/1250?image=002" data-color=“#eee”>
            <div class=“carousel-caption”>
                <h3>廣告輪播2</h3>
            </div>
        </div>
        <div class=“item active“>
            <img src=“https://unsplash.it/2000/1250?image=003" data-color=“#eee”>
            <div class=“carousel-caption”>
                <h3>廣告輪播3</h3>
            </div>
        </div>
        <div class=“item”>
            <img src=“https://unsplash.it/2000/1250?image=004" data-color=“#eee”>
            <div class=“carousel-caption”>
                <h3>廣告輪播4</h3>
            </div>
        </div>
      </div>

  &lt;!-- Controls --&gt;
  &lt;a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;上一則&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;下一則&lt;/span&gt;
  &lt;/a&gt;

</div>


Step3
加入javascript:
$(function(){
    var $item = $(‘.carousel .item’);
    var $wHeight = $(window).height();
    $item.height($wHeight);
    $item.addClass(‘full-screen’);

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//下方自動加入控制圓鈕
var total = $('.carousel .carousel-inner div.item').size();
append_li();
function append_li()
{
    var li = "";
    var get_ac = $( ".carousel .active" );
    var ac =  $( ".carousel .carousel-inner div" ).index( get_ac );

    for (var i=0; i <= total-1; i++){
        if(i == (ac)/2){
            li += "&lt;li data-target='#mycarousel' data-slide-to='"+i+"' class='active'&gt;&lt;/li&gt;";                   
        }else{
            li += "&lt;li data-target='#mycarousel' data-slide-to='"+i+"' class=''&gt;&lt;/li&gt;";                     
            }
        }
        $(".carousel-indicators").append(li);
    }

//單則隱藏控制鈕
if ($('.carousel .carousel-inner div.item').length < 2 ) { 
        $('.carousel-indicators, .carousel-control').hide();
}

//縮放視窗調整視窗高度
$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

//輪播秒數與滑入停止
$('.carousel').carousel({
  interval: 5000,
  pause: "hover"
});

});


Step4
當完成後,無論在手機還是桌機中,廣告都會全版並居中呈現,同時圓形的切換鈕都在下方。
梅問題-Bootstrap教學-Carousel廣告輪播強化(全版+自動產生圓鈕+單則隱藏控制鈕)
[範例預覽] [範例下載]