引导旋转木马陷入混乱

Question

我在基本引导轮播方面有问题。例如，我只想让幻灯片每四秒移动一次。轮播如下所示：

$(document).ready(function() {
fixCarousel();
});
function fixCarousel() {
$('.carousel').carousel({
interval: 1000*4
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>

但奇怪的事情正在发生。它工作一次，另一次等待 10 秒，然后几秒钟，然后，它正常运行，然后，它完全停止循环......

有什么解决办法吗？谢谢。

Answer 1

在这里，您可以使用解决方案 https://jsfiddle.net/zj6bj6cj/

$(document).ready(function() {
$('.carousel').carousel({
		interval: 1000*4
});
});

img {
height: 300px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>