Bootstrap – Components 元件 04

文章前提

Components 中的 Carousel

Carousel

CH7 60
課程練習下載
Bootstrap 路徑 :　Components / Carousel

| Slider Only | 範例

• 只有輪播圖片，沒有控制項
• 輪播主要區塊內 .carousel-inner +內容區塊 .carousel-item
  • 輪播數量沒有限制，只要在 .carousel-item 內皆可
• 最後需要加上 data-rite:"carousel"; 和 .active 啟用它

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  </div>
</div>

| With controls + indictors |

• Slides與controls範例 ，Slides＋ontrols＋indictors 範例
• 包含控制項（ 左右箭頭 ）與指示器 （ 下方選項 ） 的輪播圖片
• 使用 Bootstrap 的 JavaScript 會有對應 ID
• Carousel 基本結構
  • .carousel-control-prev 往前， .carousel-control-next 往後
    • 需各別加入外層對應的 ID，並於對應ID前方加入#
    • 需各別加上 data-API 啟動 → data-slide="prev" 與 data-slide="next" 啟用

<a class="carousel-control-prev" href="#外層對應ID" 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="#外層對應ID" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

• Carousel 基本結構
  • .carousel-inticators 內為指示器包含按鈕們
    • 需各別加入外層對應的 ID，並於對應ID前方加入#
    • 加上 data-API 啟動

<ol class="carousel-indicators">
    <li data-target="#外層對應ID" data-slide-to="0" class="active"></li>
    <li data-target="#外層對應ID" data-slide-to="1"></li>
    <li data-target="#外層對應ID" data-slide-to="2"></li>
</ol>

<!--Slides＋ontrols＋indictors  完整Carousel架構，如上示意圖-->
<!--最外層的ID 與內層對應ID一定要一樣-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

| Caption 字幕 | 範例

• .carousel-caption
  • 於 .carousel-inner 內的任一想加入文字的 .carousel-item 加入 .carousel-caption

<div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://placem.at/people?w=640&h=360" alt="">
            <div class="carousel-caption">
                <h4>TITLE</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eaque architecto, nulla eum asperiores temporibus. Minus libero similique, aliquid officiis asperiores iste delectus debitis aperiam voluptatibus ratione odit voluptatum veniam.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://placem.at/things?w=640&h=360" alt="">

        </div>
    </div>
</div>

---

資料來源

• 六角學院 – 精通 Bootstrap 4 開發超強不解釋
• 六角中譯 Bootstrap 官網
• Bootstrap 官方網站