# [Bootstrap] Carousel輪播幻燈片
###### tags: `Bootstrap`

## 製作流程
Carousel是幻燈片的意思，在元件裡面可以添加一些控制元素來控制幻燈片的播放。

共分為三個元素組成
* Carousel item
* Carousel controls
* Carousel indicators

#### 1. Carousel item

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="img/bg1.jpg" alt="slide01">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/bg2.jpg" alt="slide01">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/bg3.jpg" alt="slide01">
        </div>
    </div>
</div>

* 添加一個carousel容器，他可以包裝整個幻燈片組建所需的元件
* 內容放在一個carousel-inner 容器裡並在項目中carousel-item放置圖片與資訊內容
* d-block代表display:block為佔據一行，w-100表示寬度100
* data-ride 讓幻燈片可以自動切換 預設頻率是每五秒更換一次，若需要有滑動效果可以在最外面加個 slide。

#### 2. Controls控制項

* 在data-slide分別設置prv及next以完成設定左右切換圖片的功能

    <a href="#myCarousel" data-slide="prev"  class="carousel-control-prev">
     <span class="carousel-control-prev-icon">  </span>
    </a>

    <a href="#myCarousel" data-slide="next"  class="carousel-control-next">
        <span class="carousel-control-next-icon"></span></a>

#### 3. indicators指示器

* 使用`<ol>`及`<li>`列表結構並套用carousel-indicators
* 每一個`<li>`標籤對應一個slide，並將active加入到齊幻燈片內，否則輪播將看不見。

      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

### 改變slide停留時間

每張幻燈片預設的停留時間為5秒，如果想要改變停留的時間，可加上interval這個選項，調整滯留的秒數。

    $('.carousel').carousel({
      interval: 6000,
      pause: 'hover'
    });
    

### 取消自動輪播

將interval設為false即可取消自動輪播

$('.carousel').carousel({
  interval: false
})

### 鼠標滑入持續輪播

Carousel預設是當鼠標滑入時，輪播就會暫停。若想要讓滑鼠滑入時繼續輪播，就可使用以下設定。

$('.carousel').carousel({
  pause: false
})

### 停止投影片循環播放

bootstrap預設data-wrap：ture（循環播放），若投影片只想播放一個循環，更改為false即可停止無限循環。

 <div id="myCarousel" class="carousel slide" data-wrap="false" data-ride="carousel">