基礎 - JS外掛程式 - 輪播圖

標籤：

大圖在小螢幕下置中顯示的2個方案

方案1

背景圖的center center

方案2

子絕父相　　left：50% 　　margin-left:-width的一半

 

<!--#zw-carousel--><section id="zw-carousel" class="carousel slide" data-ride="carousel">    <!--活動指標-->    <ol class="carousel-indicators">        <li data-target="#zw-carousel" data-slide-to="0" class="active"></li>        <li data-target="#zw-carousel" data-slide-to="1"></li>        <li data-target="#zw-carousel" data-slide-to="2"></li>    </ol>    <!--輪播內容-->    <div class="carousel-inner" role="listbox">        <div class="item active" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14752860565672788.jpg‘)">        </div>        <div class="item" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14749742777184602.jpg‘)">        </div>        <div class="item" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14760008303724222.jpg‘)">        </div>    </div>    <!--控制按鈕-->    <a href="#zw-carousel" class="left carousel-control" role="button" data-slide="prev">    </a>    <a href="#zw-carousel" class="right carousel-control" role="button" data-slide="next">    </a></section>

　　

#zw-carousel {}#zw-carousel .carousel-inner .item {    height: 340px;    background-repeat: no-repeat;    background-position: center center;    -webkit-background-size: cover;    background-size: cover;}

　　

　　

基礎 - JS外掛程式 - 輪播圖