文章前提

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>

Bootstrap-Carousel示意圖

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

資料來源

最後修改日期: 15 3 月, 2020

作者