Bootstrap 4 轮播图：每个幻灯片的独立数据间隔

Question

Bootstrap 4 轮播图：每个幻灯片的独立数据间隔

javascripthtmlbootstrap-4carouselduration

7

我想为走马灯设置每个幻灯片的数据间隔。我在stackoverflow上找到了一个JavaScript代码片段，但它并不完美。（Twitter Bootstrap Carousel slide duration）每个幻灯片都有其数据间隔以ms为单位内联设置在html中，从3000到7000共五个幻灯片。

幻灯片的实际持续时间与我的期望和代码不符。例如：我将间隔设置为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）

有人有解决这个问题的好方法吗？

- cd-media

1

"我在stackoverflow上找到了一个针对这种情况的JavaScript代码片段" -- 请参考此问题/答案 - Carol Skelly

谢谢。我已经添加了这个引用。 - cd-media

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

我修改了 Bass Jobsen's answer for Bootstrap 3.x 中提到的方法，使其适用于Bootstrap 4轮播。我认为，这比钩入jQuery事件更加清晰明了。

它覆盖了整个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