引导程序中的自动轮播答案

【问题标题】：Automatic carousel in bootstrap引导程序中的自动轮播
【发布时间】：2019-08-22 03:39:54
【问题描述】：

我采用了自定义轮播，并尝试使幻灯片自动更改。但是，无论我尝试做什么，我都找不到任何错误。非常感谢您的帮助...

我导入了 bootstrap.min.css 并按照引导轮播说明进行操作，但我仍然无法在设定的时间后自动更改轮播。

https://codepen.io/Ale3andr0s/pen/ExYPWgQ?editors=1100

HTML：

    <div class="slider carousel slide" data-ride="carousel">
  <input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav active"/>
  <input type="radio" name="slider" title="slide2" class="slider__nav"/>
  <input type="radio" name="slider" title="slide3" class="slider__nav"/>
  <input type="radio" name="slider" title="slide4" class="slider__nav"/>

  <div class="slider__inner data-interval=100">

    <div class="slider__contents active"><i class="slider__image fa fa-codepen"></i>
      <h2 class="slider__caption">codepen</h2>
      <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
    </div>

    <div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
      <h2 class="slider__caption">newspaper-o</h2>
      <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
    </div>

    <div class="slider__contents"><i class="slider__image fa fa-television"></i>
      <h2 class="slider__caption">television</h2>
      <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
    </div>

    <div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
      <h2 class="slider__caption">diamond</h2>
      <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
    </div>

  </div>
</div>

【问题讨论】：

这是 Bootstrap 轮播 getbootstrap.com/docs/4.3/components/carousel .. 看来您没有正确设置它。
正如您在 codepen 中看到的那样，它具有自定义 css 并且可以正常工作，但我无法使其与指标一起自动更改。如果您能具体找到问题，我将不胜感激...

标签： javascript jquery html css bootstrap-4

【解决方案1】：

根据Bootstrap documentation，需要添加

$('.carousel').carousel({
  interval: 2000
})

添加到您的代码，以使轮播在幻灯片中循环播放。
如果还是不行，就需要改成

$(document).ready(function() {
    $('.carousel').carousel({
      interval: 1200
    })
  });

当然，您还需要导入 jquery 和 bootstrap.js，而您的代码没有这样做。

【讨论】：