Bootstrap_Carousel輪播幻燈片

Carousel中文為幻燈片的意思，在元件裡面可以添加控制元素來控制幻燈片的播放。

組成結構

分為三個元素組成

• Carousel item
• Carousel controls
• Carousel indicators

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。

Controls控制項

<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>

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

indicators指示器

<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>

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

改變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">

實作成果

首頁輪播: 運動頻道