我想为走马灯设置每个幻灯片的数据间隔。我在stackoverflow上找到了一个JavaScript代码片段,但它并不完美。(Twitter Bootstrap Carousel slide duration)每个幻灯片都有其数据间隔以ms为单位内联设置在html中,从3000到7000共五个幻灯片。
幻灯片的实际持续时间与我的期望和代码不符。例如:我将间隔设置为3000,但幻灯片显示大约需要7-8秒。
js文件写在网站的页脚区域。
以下是js代码:
注意:我已经更改了轮播控制器的代码行carousel-control-next和-carousel-control-prev。(之前是-left和-right)
有人有解决这个问题的好方法吗?
幻灯片的实际持续时间与我的期望和代码不符。例如:我将间隔设置为3000,但幻灯片显示大约需要7-8秒。
js文件写在网站的页脚区域。
以下是js代码:
var t;
var start = $('#carouselExampleFade').find('.active').attr('data-interval');
t = setTimeout("$('#carouselExampleFade').carousel({interval: 1000});", start - 1000);
$('#carouselExampleFade').on('slid.bs.carousel', function() {
clearTimeout(t);
var duration = $(this).find('.active').attr('data-interval');
$('#carouselExampleFade').carousel('pause');
t = setTimeout("$('#carouselExampleFade').carousel();", duration - 1000);
})
$('.carousel-control-next').on('click', function() {
clearTimeout(t);
});
$('.carousel-control-prev').on('click', function() {
clearTimeout(t);
});
旋转木马的一部分:
<div class="row">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="2000">
<div class="carousel-caption d-none d-md-block text-left">
<h3>Willkommen im <br>Parkett!</h3>
</div>
<img class="d-block w-100" src="assets/img/animation/slide1.jpg" alt="First slide">
</div>
注意:我已经更改了轮播控制器的代码行carousel-control-next和-carousel-control-prev。(之前是-left和-right)
有人有解决这个问题的好方法吗?