问题描述
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>