前言
輪播幻燈片是一個循環滾動的套件,可以使用文本、圖片水平不間斷滾動,就像旋轉木馬一樣,常常出現在網站的首頁,不管播放形象圖還是行銷圖片都很常見。
( 圖片來源 )
官方網站的 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>