[英]Bootstrap 4 Carousel: Individual data-interval on each slide
I want to set the data-interval for each slide of the carousel. 我想为旋转木马的每张幻灯片设置数据间隔。 Here on stackoverflow I found a JavaScript snippet for this case, but it doesn't work well.
在stackoverflow上,我找到了一个针对这种情况的JavaScript代码段,但它不能正常工作。 ( Twitter Bootstrap Carousel slide duration ) Each slide has its data-interval set inline in html with ms from 3000 to 7000 on five slides.
( Twitter Bootstrap Carousel幻灯片持续时间 )每张幻灯片的数据间隔都以html格式设置,五张幻灯片上的ms为3000到7000。
The real duration of the slides does not fit to my expectations and the code. 幻灯片的实际持续时间不符合我的期望和代码。 Example: I set the interval to 3000 and the slide is shown around 7-8 seconds.
示例:我将间隔设置为3000,幻灯片显示大约7-8秒。
The js-file is written in the footer area of the site. js文件写在站点的页脚区域中。
Here is the js code: 这是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);
});
One part of the carousel: 旋转木马的一部分:
<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>
Note: I have changed the lines carousel-control-next and -prev. 注意:我已更改了carousel-control-next和-prev行。 (It was -left and -right before).
(之前是 - 左和右)。
Does anyone have a good idea so solve this problem? 有没有人有一个好主意,所以解决这个问题?
I modified the approach outlined in Bass Jobsen's answer for Bootstrap 3.x so that it works for the Bootstrap 4 carousel. 我修改了Bass Jobsen对Bootstrap 3.x的回答中概述的方法,以便它适用于Bootstrap 4轮播。 IMO, this is a much cleaner approach than hooking into the jQuery events.
IMO,这比挂钩jQuery事件要简洁得多。
It overrides the interval
set for the entire Carousel ( this._config.interval
), with intervals set on the individual carousel items ( data-interval="..."
): 它会覆盖为整个Carousel设置的
interval
( this._config.interval
),并在各个轮播项目上设置间隔( data-interval="..."
):
$.fn.carousel.Constructor.prototype.cycle = function (event) {
if (!event) {
this._isPaused = false;
}
if (this._interval) {
clearInterval(this._interval)
this._interval = null;
}
if (this._config.interval && !this._isPaused) {
var $ele = $('.carousel-item-next');
var newInterval = $ele.data('interval') || this._config.interval;
this._interval = setInterval(
(document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
newInterval
);
}
};
https://www.codeply.com/go/sGAOcxEzV8 https://www.codeply.com/go/sGAOcxEzV8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.