Bootstrap 4 停止自动滑动 - Html

Bootstrap 4是一个流行的CSS框架，它包括许多组件和选项，以帮助您快速轻松地构建现代Web应用程序。其中一个特性是幻灯片（Carousel）组件，它可以自动滑动来展示多张图片，但有时候我们需要停止自动滑动，本篇文章将介绍如何实现这一点。

实现步骤

1. 引用Bootstrap源文件

在HTML文件中，我们需要引用Bootstrap 4的源文件。在head标签中添加以下代码：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

这将包括Bootstrap 4的所有CSS和JavaScript文件，以便我们使用Carousel组件。

2. HTML代码

下一步是添加Carousel组件的HTML代码。以下是一个基本的示例：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img src="https://via.placeholder.com/150x150" alt="First slide">
      </div>
      <div class="carousel-item">
         <img src="https://via.placeholder.com/150x150" alt="Second slide">
      </div>
      <div class="carousel-item">
         <img src="https://via.placeholder.com/150x150" alt="Third slide">
      </div>
   </div>
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
   </a>
</div>

在这里，我们定义了一个Carousel组件，其中包括以下几个元素：

• <ol>元素：包含幻灯片的指示器，用于在幻灯片间进行导航。
• <div>元素：包含所有的幻灯片。
• <a> 元素：用于控制前进和后退幻灯片。

3. JS代码

最后一步是添加JavaScript代码，以便停止Carousel自动滑动。首先，我们需要禁用 data-ride 属性，即 data-ride="carousel" 这个属性。如下：

<div id="myCarousel" class="carousel slide" data-ride="">
   <!-- same HTML code as before -->
</div>

然后，我们需要添加以下JavaScript代码：

$('#myCarousel').carousel({
   interval: false
});

这将停止Carousel自动滑动，使我们手动控制Carousel。

结论

如上所述，我们可以通过禁用 data-ride 属性和添加JavaScript代码来停止Bootstrap 4 Carousel自动滑动。这样，我们就可以完全控制Carousel并根据需要手动切换幻灯片。