ㄧ.幻燈片控制項
<div class="component" id="demo">
<div class="carousel slide" id="carousel-demo" data-ride="carousel">
<div class="carousel-inner">
.........
</div>
<a href="#carousel-demo" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#carousel-demo" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
.component.demo{
padding: 50px;
}
重點:
1.控制項部分的結構需要在.carousel-inner同層添加a連結
2.a連結的屬性有.carousel-control-next與data-slider="prev"
3.上面部分為prev,另外一部分的next將上面結構複製一份並且將prev全部改成next
4.如要控制項能控制的話,需在.carousel加入#carousel-demo
5.在a連結屬性的href加入#carousel-demo,如此按控制項就可有滑動效果
二.幻燈片指示器
<div class="component" id="demo">
<div class="carousel slide" id="carousel-demo" data-ride="carousel">
<div class="carousel-inner">
.........
</div>
<a href="#carousel-demo" class="carousel-control-prev" data-slide="prev">
.....
</a>
<ol class="carousel-indicators">
<li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
<li data-target="#carousel-demo" data-slide-to="1"></li>
<li data-target="#carousel-demo" data-slide-to="2"></li>
</ol>
</div>
</div>
.component.demo{
padding: 50px;
}
重點:
1.指示器也一樣跟.carousel-inner同層需添加ol.carousel-indicators
2.ol的子元素li的屬性有data-target="carousel-demo"以及data-slider-to="0"
3.圖片有幾個就添加幾個,但data-slider-to="0"需要改。是一個順序如第一個就0第二個就1
4.會從0開始可能是使用陣列的方式
5.記得在li第一個加入.active顯示哪個圖片