F2E合作社｜製作輪播幻燈片｜Bootstrap 5網頁框架開發入門

前言

輪播幻燈片是一個循環滾動的套件，可以使用文本、圖片水平不間斷滾動，就像旋轉木馬一樣，常常出現在網站的首頁，不管播放形象圖還是行銷圖片都很常見。

（ 圖片來源 ）

官方網站的 Carousel 頁面

輪播是循環顯示一系列內容的幻燈片，由 CSS 的 3D transform 以及一些 JavaScript 建構而成，它適用於一系列圖片、文本或自定義的標記，並包括對上一個、下一個控制項和指示器的支援。

僅有幻燈片

只有幻燈片的輪播。 輪播圖上有 .d-block 和 .w-100 ，以避免瀏覽器預設的圖像對齊。

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
</div>

包含控制項

加入上一個與下一個控制項時，我們建議使用 <button> 元素，當然也可以使用 <a> 來當作 button 使用，記得要替 <a> 元素加上 role="button" 。

HTML

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

包含指示器

也可以將指示器與控制項一起添加到輪播中。

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

包含字幕

在任意 .carousel-item 中使用 .carousel-caption 替幻燈片添加字幕。

HTML

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

淡入淡出

將 .carousel-fade 加到輪播中，以使用淡入淡出的取代滑動的動畫效果。

HTML

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

設置時間間隔

在 .carousel-item 上添加 data-bs-interval="" 以更改自動循環至下一個項目的延遲時間，一秒 = 1000 。

HTML

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-bs-interval="2000">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

禁用觸摸滑動

輪播支持在觸摸屏設備上向左、向右滑動以在幻燈片之間移動。這可以使用 data-bs-touch 屬性禁用。

HTML

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

暗色系變化

在 .carousel 上添加 .carousel-dark 附加選項暗色系的控制、選項及字幕。控制項已通過 CSS 屬性添加屬性 filter 從它們默認的白色填充。字幕與提供自定義 color 及額外控制選項 background-color 。

HTML

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="2000">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

參考資料

1. Carousel · Bootstrap v5.0
2. 輪播 (Carousel) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. 幻燈片製作無困難-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學