Question

我有带有以下代码的标准bootstrap 4.5轮播：

import

我需要幻灯片自动滚动。当我将鼠标悬停在转盘上时，周期被中断。我希望旋转木马继续滑动。请接受我的建议...谢谢大家

Answer 1

初始化轮播时，将false传递给pause选项。另外，您也可以使用数据属性。参考：https://getbootstrap.com/docs/4.5/components/carousel/#options

$('.carousel').carousel({
    pause: false
})

#carouselExampleSlidesOnly{
  max-width: 150px;
  max-height: 150px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="500">
      <img src="https://via.placeholder.com/150x151" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="500">
      <img src="https://via.placeholder.com/150x152" class="d-block w-100" alt="...">
    </div>

  </div>
</div>

自举轮播循环

1 个答案: