多個引導輪播幻燈片

如何在單頁或一頁上添加多個引導輪播幻燈片幻燈片？

在本教程中，我們提供了一個工作源代碼示例。 首先，使用頁面底部的下載代碼按鈕下載示例代碼。

在頁面上添加和創建多個引導輪播滑塊非常簡單。

那麼，讓我們從示例代碼開始。

源代碼下載完成後，您將獲得一個 zip 文件“multiple-bootstrap-carousels.zip”。 將 zip 文件解壓縮到本地計算機系統的任何位置。

解壓後，您會找到一個名為“multiple-bootstrap-carousels”的目錄，在該目錄中您將獲得以下資產：

1. CSS 目錄
2. 字體目錄
3. 圖片目錄
4. JS 目錄
5. CSS 目錄
6. HTML 文件 – 多重引導-carousels.html

這些證明是什麼？

這些資產是創建引導多個輪播滑塊所必需的。

• CSS目錄包含一個文件“bootstrap.min.css”，用於設計響應式 HTML 頁面。
• 引導 CSS 使用字體目錄來生成各種內置的圖形圖標。 Carousel 滑塊箭頭導航控件也是由此生成的。 你可以在這裡查看。
• 圖像目錄包含我們將用於輪播滑塊幻燈片的所有圖像。
• JS目錄包含 2 個 js 文件“jquery.min.js”和“bootstrap.min.js”。 一個 jquery.min.js 文件是一個 JavaScript 庫，目的是讓 jquery 在網站上使用 JavaScript。 bootstrap.min.js 文件是引導框架 js 庫文件，用於創建引導輪播、模型表單、工具提示、選項卡等。 bootstrap.min.js 文件依賴於 jquery.min.js 文件，您需要加載首先在使用引導 js 之前。 您可以在此處進一步了解 bootstrap js 庫文件。
• HTML 文件 (multiple-bootstrap-carousels.html)包含多個輪播滑塊的所有設計和代碼部分。

讓我們了解有關 multiple-bootstrap-carousels.html 文件的更多信息。

您應該在任何代碼編輯器中打開 HTML 文件。 如果您的計算機上沒有安裝代碼編輯器工具，那麼這裡有一些收費的代碼編輯器工具，下載並安裝任何代碼編輯器工具：

在 Head 部分，我們已經加載了所有必需的 CSS & js 文件和四個輪播 JS 代碼，如下所示：

代碼

<頭部>
 <title>多個引導輪播幻燈片示例</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- 引導 css 庫 -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- jQuery 最新庫（先加載這個庫）-->
 <script src="js/jquery.min.js"></script>
 
 <!-- 引導 js 庫 -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- 輪播自定義css代碼 -->
 <風格>
 .carousel {
 /* 您可以在此處添加自定義 CSS，例如滑塊高度寬度 */
 }
 </style>
 
 <!-- 輪播js代碼-->
 <腳本>

 /* 第一個輪播幻燈片 */
 $('#carousel-1').carousel({
      // 循環滑動之間延遲的時間量，如果為假，則不循環
      間隔：500，

      // 鼠標進入時暫停滑動，鼠標離開時繼續。
      暫停：“懸停”，

      // carousel 是否應該連續循環或有硬停止。
      包裝：真的，

      // 輪播是否應該對鍵盤事件做出反應。
      鍵盤：真
 });
 
 
 /* 第二個輪播幻燈片 */
 $('#carousel-2').carousel({
      間隔：1000，
      包裝：真的，
      鍵盤：真
 });
 
 
 /* 第三個輪播幻燈片 */
 $('#carousel-3').carousel({
     間隔：2000，
     包裝：真的，
     鍵盤：真
 });
 
 
 /* 第四個輪播幻燈片 */
 $('#carousel-4').carousel({
     間隔：3000，
     包裝：真的，
     鍵盤：真
 });
 </腳本>
 </head>

在 Body 部分，我們定義了兩個輪播 HTML 代碼。 現在，解釋第一個滑塊代碼的工作原理。 我們使用 col-md-6 類將行類 div 分為兩列。 在第一列中，我們添加了第一個輪播滑塊的 HTML 代碼，如下所示。

 <div class="行">
 <!------------- 第一列開始 -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>輪播一號</h3></center>
   <!-------------- 第一個輪播幻燈片開始 -------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- 幻燈片項目符號 -->
   <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- 幻燈片的包裝器 -->
   <div class="carousel-inner" role="listbox">
    
    <!-- 幻燈片 1 -->
    <div class="item active">
     <img src="images/girl-1.jpg" alt="Chania">
    </div>
 
    <!-- 幻燈片 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="Chania">
    </div>
 
    <!-- 幻燈片 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="花">
    </div>

   </div>

   <!-- 左右滑動控制箭頭 -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">上一個</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">下一個</span>
   </a>
  </div>
  <!-------------- 第一個輪播幻燈片結束 -------------->
  </div>
 </div>
 <!------------- 第一列結束 -------------->
</row>

上面的 HTML 代碼中有旋轉木馬滑塊的三個部分

• 滑塊子彈
• 圖片幻燈片
• 滑塊導航

Slider Bullets部分是使用 HTML 的訂單列表標籤構建的。 <ol> 使用一個名為carousel-indicators的類，該類定義在引導 CSS 文件中。 每個 <li> 標籤都有一個屬性data-target=”#carousel-1” ，其中#carousel-1是我們在第一個輪播 js 代碼到示例代碼中使用的相同 ID。

Slider Image Slides部分有一個帶有類item的 div。 在每個 div 中，我們添加了一個圖像標籤來加載幻燈片圖像。

滑塊導航用於向左或向右導航圖像幻燈片。 導航箭頭由稱為Glyphicon的引導圖形圖標創建。 導航按鈕被包裹在帶有引導輪播數據屬性函數和輪播控制類的錨 <a> 標記中。 在 <a> 標籤的href屬性中，我們添加了與之前添加到滑塊項目符號部分相同的 ID ( #carousel-1 )。 此 ID 用於第一個輪播幻燈片 js 代碼，以將第一個滑塊功能激活到第一個滑塊 HTML 代碼中。

在我們的第二個滑塊代碼中，我們為滑塊代碼的所有三個部分分配了另一個 ID #carousel-2 ，例如第二個滑塊 js 代碼、第二個滑塊項目符號和導航 HTML 代碼。

希望！ 你們會發現教程和示例代碼是描述性的並且適合您。 我們已經對示例中的每一段代碼進行了註釋，因此您可以輕鬆理解每一段代碼。

伙計們，如果您對教程語言和可下載的示例代碼有任何建議，請通過我們的郵件給我們寫信。 我們的電子郵件地址是awordpresslife{at}gmail{dot}com

感謝閱讀、使用和支持本教程。

在下面找到我們希望為您編寫本教程的有用參考鏈接：