Bootstrap-使用輪播幻燈片Carousal

元件結構

carousal由三個小元件組成，controllers跟indicators 可以選擇性的增加

• sliders
• controls
• indicators
  

sliders

• 套用的class分為三層
  • carousal
  • carousal-inner
  • carousal-item
• .carousal為一個外層容器，在這一層添加data-ride="carousel"讓輪播器自動播放。
• .carousal-inner主要是讓空間寬度為全版width: 100%;
• .carousal-item代表一個slide的，裡面可以置放所有文字、圖片內容。在該層添加active代表輪播一開始的畫面

  <div id="carouselExample" 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="First slide">
          </div>
          <div class="carousel-item">
              <img class="d-block w-100" src="img/bg2.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
              <img class="d-block w-100" src="img/bg3.jpg" alt="Third slide">
          </div>
      </div>
  </div>

controls

• 程式碼位置，包在carousal中
• 左按鈕，套用的class分為兩層
  • <a>標籤中，套用carousel-control-prev
  • <span>標籤中，套用carousel-control-prev-icon
• 右按鈕，套用的class分為兩層
  • <a>標籤中，套用carousel-control-prev
  • <span>標籤中，套用carousel-control-next-icon
• 在<a>層主要是定義按鈕的作用目的位置
  • href放上作用caroudal的id(也就是外層carousal的id)
  • data-slide="prev"是bootstrap自定義的屬性，用來轉換上一個或下一個項目
  • role＝”bottom”用來幫助殘障人士，可以借助閱讀器判斷該元件為按鈕
• 在<span>層主要就比較純粹定義按鈕的樣式
• 每個<a>中包含兩個<span>，一個是給一般使用者看的，另外一個是給身障人士可以透過screen reader讀取辨識的
  • aria-hidden=true" 可以讓朗讀軟體讀不到此元件。相反的，sr-only 這個 class 是只有使用朗讀程式才可以讀取到的

<!-- <div id="carouselExample" class="carousel slide" data-ride="carousel"> -->
<!-- 位置放在carousal中 -->

    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    
<!-- </div> -->

indicators

• 程式碼位置，包在carousal中
• 使用<ol>及<li>列表結構
  • <ol>標籤中，套用carousel-indicators
  • 每一個<li>標籤，就搭配到一個slide，若為預設可視的slide，class則添加active

<!-- <div id="carouselExample" class="carousel slide" data-ride="carousel"> -->
<!-- 位置放在carousal中 -->

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

==Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to=”2”, which shifts the slide position to a particular index beginning with 0.==

補：改變每一張slide停留的時間

Bootstrap 預設每張幻燈片停留時間為5000毫秒(5秒)，可以用interval改變停留時間(單位為毫秒)。

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

補：滑鼠滑入slide，不暫停輪播

Bootstrap 預設當滑鼠滑入slide時，輪播會暫停
，可以修改為pause:false。

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

參考bootstrap部分原始碼

• .carousel-inner
  
• .carousel-item
  
• .carousel-item .actice
  
• .carousel-control-prev
• .carousel-control-next
  
• .carousel-control-prev-icon
• .carousel-control-next-icon
  
• .carousel-indicators
  

成果

My Project-LonelyPlanet-Home page-Header