Bootstrap 4 Carousel：每张幻灯片上的单独数据间隔

Posted 2023-03-05

【中文标题】Bootstrap 4 Carousel：每张幻灯片上的单独数据间隔

【英文标题】：Bootstrap 4 Carousel: Individual data-interval on each slide

【发布时间】：2018-11-30 18:22:11

【问题描述】：

我想为轮播的每张幻灯片设置数据间隔。 在 *** 上，我找到了适用于这种情况的 javascript sn-p，但效果不佳。 (Twitter Bootstrap Carousel slide duration) 每张幻灯片都在 html 中内嵌了它的数据间隔，五张幻灯片上的 ms 从 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" >
            </div>

注意：我更改了 carousel-control-next 和 -prev 行。 （之前是-left和-right）。

有没有人有一个好主意来解决这个问题？

【问题讨论】：

“在 *** 上，我找到了适用于此案例的 JavaScript sn-p” -- 请参考此问题/答案

谢谢。我已添加此参考。

【参考方案1】：

我修改了Bass Jobsen's answer for Bootstrap 3.x 中概述的方法，使其适用于 Bootstrap 4 轮播。 IMO，这是一种比挂钩 jQuery 事件更简洁的方法。

它会覆盖整个轮播 (this._config.interval) 的 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

【讨论】：

感谢您的帮助和努力。效果很好！

我对您的代码进行了最小的更改以支持多个轮播。基本上用这一行替换：var $ele = $('.carousel-item-next');：var $ele = $(this._element).find('.carousel-item-next');。这是一个例子：***.com/questions/53635583/…

这很好用。然而，页面加载第一项的持续时间是引导程序的默认值 5000 毫秒。要遵守第一项的持续时间，请将data-interval 属性设置为轮播容器，其值为第一项的持续时间。此后，每个项目的持续时间都将受到尊重，即使在循环时也是如此。