如何解决自举轮播循环
我有带有以下代码的标准bootstrap 4.5轮播:
import
我需要幻灯片自动滚动。当我将鼠标悬停在转盘上时,周期被中断。我希望旋转木马继续滑动。请接受我的建议...谢谢大家
解决方法
初始化轮播时,将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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。