17.Bootstrap(中文教程)元件：幻灯片(Carousel)控制项与指示器

ㄧ.幻灯片控制项

<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显示哪个图片

codepen
参考：bootstrap4