多个引导轮播幻灯片

如何在单页或一页上添加多个引导轮播幻灯片幻灯片？

在本教程中，我们提供了一个工作源代码示例。 首先，使用页面底部的下载代码按钮下载示例代码。

在页面上添加和创建多个引导轮播滑块非常简单。

那么，让我们从示例代码开始。

源代码下载完成后，您将获得一个 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

感谢阅读、使用和支持本教程。

在下面找到我们希望为您编写本教程的有用参考链接：