:::

15. 輪播(滑動圖)

一、輪播基本語法

  1. 基本語法:
    <div id="carousel-bs4" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-bs4" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-bs4" data-slide-to="1"></li>
            <li data-target="#carousel-bs4" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                滑動內容1
            </div>
            <div class="carousel-item">
                滑動內容2
            </div>
            <div class="carousel-item">
                滑動內容3
            </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-bs4" 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="#carousel-bs4" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  2. 滑動內容可以放任何東西,例如用媒體物件來做就蠻方便的。

  3. 上方的<ol>是用來製作下方的指示器,拿掉亦可。

  4. 下方的兩個<a>是用來做左右控制項,不用也行。

  5. 詳情:http://bootstrap.hexschool.com/docs/4.0/components/carousel/

二、多一組輪播內容

  1. 若要多一組輪播內容,上方的<ol>就要多一組<li>

    <li data-target="#carousel-bs4" data-slide-to="3"></li>
  2. 中間的 <div> 就要多一組對應設定:

    <div class="carousel-item"> 
        滑動內容4 
    </div>

三、快速語法

在 Visual Studio Code 中輸入b4-carousel-captionEnter 可以快速產生 carousel 的語法

 


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D32%26tbdsn%3D948

計數器

今天: 2726272627262726
昨天: 3438343834383438
總計: 7393055739305573930557393055739305573930557393055