怎么制作bootstrap錄播圖

這篇文章主要介紹怎么制作bootstrap錄播圖，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

輪播是一個循環的幻燈片：

如何創建輪播

以下實例創建了一個簡單的圖片輪播效果 ：

<div id="demo" class="carousel slide" data-ride="carousel">   <!-- 指示符 -->  <ul class="carousel-indicators">    <li data-target="#demo" data-slide-to="0" class="active"></li>    <li data-target="#demo" data-slide-to="1"></li>    <li data-target="#demo" data-slide-to="2"></li>  </ul>   <!-- 輪播圖片 -->  <div class="carousel-inner">    <div class="carousel-item active">      <img src="https://cache.yisu.com/upload/information/20201210/269/44419.jpg">    </div>    <div class="carousel-item">      <img src="https://cache.yisu.com/upload/information/20201210/269/44420.jpg">    </div>    <div class="carousel-item">      <img src="https://cache.yisu.com/upload/information/20201210/269/44421.jpg">    </div>  </div>   <!-- 左右切換按鈕 -->  <a class="carousel-control-prev" href="#demo" data-slide="prev">    <span class="carousel-control-prev-icon"></span>  </a>  <a class="carousel-control-next" href="#demo" data-slide="next">    <span class="carousel-control-next-icon"></span>  </a> </div>

輪播圖片上添加描述

在每個 <div class="carousel-item"> 內添加 <div class="carousel-caption"> 來設置輪播圖片的描述文本：

<div class="carousel-item">  <img src="https://cache.yisu.com/upload/information/20201210/269/44419.jpg">  <div class="carousel-caption">    <h4>第一張圖片描述標題</h4>    <p>描述文字!</p>  </div></div>

以上實例使用的類說明

.carousel創建一個輪播.carousel-indicators為輪播添加一個指示符，就是輪播圖底下的一個個小點，輪播的過程可以顯示目前是第幾張圖。.carousel-inner添加要切換的圖片.carousel-item指定每個圖片的內容.carousel-control-prev添加左側的按鈕，點擊會返回上一張。.carousel-control-next添加右側按鈕，點擊會切換到下一張。.carousel-control-prev-icon與 .carousel-control-prev 一起使用，設置左側的按鈕.carousel-control-next-icon與 .carousel-control-next 一起使用，設置右側的按鈕.slide切換圖片的過渡和動畫效果，如果你不需要這樣的效果，可以刪除這個類。

以上是“怎么制作bootstrap錄播圖”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！