BootStrap 輪播 Carousel
一個輪播通常有三個部件
1. 輪播的圖片
2. 圖片計數器
3. 控制器
<!-- 這是輪播的主要外層 -->
<div id="slidershow" class="carousel">
<!-- 設定圖片輪播的順序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
...
</ol>
<!-- 設定輪播圖片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="#" alt=""></a>
<!-- 圖片對應標題和描述內容 -->
<div class="carousel-caption">
<h3>圖片標題</h3>
<p>描述內容...</p>
</div>
<div class="item">
<a href="##"><img src="#" alt=""></a>
<!-- 圖片對應標題和描述內容 -->
<div class="carousel-caption">
<h3>圖片標題</h3>
<p>描述內容...</p>
</div>
…
<div class="item">
<a href="##"><img src="#" alt=""></a>
<!-- 圖片對應標題和描述內容 -->
<div class="carousel-caption">
<h3>圖片標題</h3>
<p>描述內容...</p>
</div>
</div>
<!-- 設定輪播圖片控制器 -->
<!-- 往前一個 -->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- 往後一個 -->
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- 設定圖片輪播class的css -->
.carousel-indicators {
position: absolute; /*整個計數區域絕對定位*/
bottom: 10px; /*距容器carousel底部10px*/
z-index: 15; /*設定其在Z軸的層級*/
/*讓整個計數區水平居中*/
left: 50%;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
/*設定當前狀態樣式*/
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}
參考:
https://tw511.com/a/01/32244.html
留言
張貼留言