时间戳

首页 > 解决方案 > 引导程序中的自动轮播

javascript - 引导程序中的自动轮播

问题描述

我拿了一个自定义轮播，并尝试让幻灯片自动更改。但是，无论我尝试做什么，我都找不到任何错误。我将非常感谢一些帮助...

我导入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>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

根据Bootstrap 文档，您需要添加

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

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

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

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

推荐阅读