第22節(jié) Bootstrap5 Carousel 圖片輪播組件用法
22.1 輪播組件
輪播（Carousel）是一種幻燈片放映組件，用于在元素、圖像或文本幻燈片（如旋轉(zhuǎn)木馬）之間循環(huán)播放。
carousel是一個幻燈片，用于循環(huán)播放一系列內(nèi)容，使用css3d轉(zhuǎn)換和一點JavaScript構(gòu)建。它可以處理一系列圖像、文本或自定義標(biāo)記。它還包括對上一個/下一個控件和指示器的支持。
在支持頁面可見性API的瀏覽器中，當(dāng)用戶看不到網(wǎng)頁時（例如瀏覽器選項卡處于非活動狀態(tài)、瀏覽器窗口最小化等），輪播將避免滑動。
輪播不會自動標(biāo)準(zhǔn)化幻燈片的尺寸。因此，您可能需要使用額外的通用類別或自定義樣式將內(nèi)容調(diào)整成適當(dāng)?shù)拇笮?。雖然輪播支持上一個/下一個控件和指示器，但是它們不是必備項目。可依照需求添加和自定義。
22.2 不同形式的輪播例子
22.2.1 僅幻燈片的輪播
這是一個只有幻燈片的輪播。請注意在輪播圖片上存在.d-block和.w-50，以避免瀏覽器預(yù)設(shè)的圖象對齊。 以下代碼每隔5秒鐘換一副圖片。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>輪播</title>
</head>
<body>
<div class="container">
<br><br><br>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../pic/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../pic/4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../pic/6.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼22.2.2 帶上一個和下一個控件
添加上一個和下一個控件。我們建議使用button元素，但也可以將a元素與 role="button"一起使用。需要注意的是，要設(shè)置圖片大小和寬度，需要設(shè)置carousel容器的大小，圖片的設(shè)置一定要w-100，充滿容器，否則下一個可能看不到。
<div id="carouselExampleControls" class="carousel slide w-50" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../pic/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../pic/4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../pic/6.jpg" 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>
復(fù)制代碼圖片兩側(cè)的大于號和小于號就是上一個、下一個控件。
22.2.3 帶指示器
指示器就是下圖中三個白色的橫杠，點擊可直接切換到相應(yīng)圖片。
<div id="carouselExampleIndicators" class="carousel slide w-50" 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="../pic/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../pic/4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../pic/6.jpg" 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>
復(fù)制代碼22.2.4 帶字幕
在任意carousel-item中使用carousel-caption替幻燈片添加字幕?？梢赃x擇使用display通用類別輕易地在較小的viewport上隱藏它們，如下所示，一開始將會用d-none隱藏，并使用d-md-block讓它們在中型的設(shè)備上重新顯示。
<div id="carouselExampleCaptions" class="carousel slide w-50" 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="../pic/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>第一個幻燈片</h5>
<p>一枝紅艷露凝香，云雨巫山枉斷腸。<br>——唐代李白的《清平調(diào)·其二》</p>
</div>
</div>
<div class="carousel-item">
<img src="../pic/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>第二個幻燈片</h5>
<p>南國有佳人，容華若桃李。<br>——漢曹植的《雜詩七首·其四》</p>
</div>
</div>
<div class="carousel-item">
<img src="../pic/6.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>第三個幻燈片</h5>
<p>云想衣裳花想容，春風(fēng)拂檻露華濃。<br>
——唐代李白的《清平調(diào)·其一》</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>
復(fù)制代碼22.2.5 淡入淡出
將carousel-fade加到carousel容器中，以使用淡入淡出的取代滑動的動畫效果。 這部分就不演示了，包括后面兩個，都是一個參數(shù)的事情。
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
復(fù)制代碼22.2.6 設(shè)置時間間隔
在carousel-item上添加data-bs-interval=""以更改自動循環(huán)至下一個項目的延遲時間。 這個參數(shù)需要設(shè)置在每個arousel-item，時間單位是毫秒，如果設(shè)置間隔5秒，則為5000。下面是設(shè)置間隔10秒。
<div class="carousel-item active" data-bs-interval="10000">
復(fù)制代碼22.2.7 禁用觸摸切換
輪播組件支持在觸摸屏設(shè)備上左/右滑動以在幻燈片之間移動。這可以使用data-bs-touch屬性禁用。下面的示例既不包括 data-bs-ride屬性，并且具有data-bs-interval="false" ，因此它不會自動播放。
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
復(fù)制代碼22.2.8 暗變型
在carousel上添加carousel-dark以獲得暗色系的控制項、指示器及字幕?？丶淹高^CSS屬性filter從它們預(yù)設(shè)的白色充填反轉(zhuǎn)。字幕與控件具有用來自定義color及background-color的額外變量。
我們以22.2.4例子添加carousel-dark為例，查看效果
<div id="carouselExampleCaptions" class="carousel carousel-dark slide w-50" data-bs-ride="carousel">
復(fù)制代碼因為選擇的圖片色彩本身有點暗，所以用這個效果不好，如果是色彩明麗的圖片會好看，大家可以試試。
今天的課程就到這里，限于篇幅，有些內(nèi)容沒講到的，大家可以查看 Bootstrap5中文手冊，請關(guān)注我，及時學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第23節(jié) Bootstrap5 下拉菜單組件用法，從字面也可以看出，按鈕組就是多個按鈕的組合。
如果這篇文章對你有幫助，記得隨手點贊哦！