时间戳

首页 > 解决方案 > 个人数据间隔引导轮播 4

javascript - 个人数据间隔引导轮播 4

问题描述

我想为我的 bootstrap 4 carousel 上的每张幻灯片设置一个单独的数据间隔。我尝试了其他一些 javascript 片段，但是它们似乎不适用于我的代码，例如Bootstrap 4 Carousel-stack overflow

任何人都可以提出一些建议，任何帮助表示赞赏。

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}
.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
   Testimonial 1
    </div>
    <div class="carousel-item">
     Testimonial 2
    </div>
    <div class="carousel-item">
     Testimonial 3
    </div>
  </div>
  </div>

标签： javascriptjqueryhtmlcsstwitter-bootstrap

解决方案

我已经根据 Zim 的回答做了一个实现：Bootstrap 4 Carousel: Individual data-interval on each slide，它运行良好，除了轮播的起点（即第一张幻灯片使用默认间隔第一次迭代）。要使用此扩展，您必须将data-interval属性添加到其上的每个carousel-item设置中，间隔的毫秒数。检查下一个示例：

$(document).ready(function()
{
    // Extend the Bootstrap carousel implementation.

    $.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 item = $('.carousel-item-next');
            var newInterval = item.data('interval') || this._config.interval;

            this._interval = setInterval(
                (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
                newInterval
            );
        }
    };
});
#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

或者，如果前面的方法不起作用，您可以在包含Bootstrap文件之后将代码包装在内部<script>和</script>标记中，如下所示：

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script>
$.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 item = $('.carousel-item-next');
        var newInterval = item.data('interval') || this._config.interval;

        this._interval = setInterval(
            (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
            newInterval
        );
    }
};
</script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

更新以支持多个轮播

下一个示例展示了如何正确实现支持多个轮播。基本上我们需要在选择时使用下一行item：

var item = $(this._element).find('.carousel-item-next');


#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

#top-bootstrap-slider2{
    width: 80%;
    margin: auto;
    background: skyblue;
    color: white;
    height: 50px;
    margin-top: 25px;
    overflow: hidden;
    font-size: 14px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script>
$.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)
    {
        // This next line does the trick.
        var item = $(this._element).find('.carousel-item-next');
        var newInterval = item.data('interval') || this._config.interval;

        this._interval = setInterval(
            (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
            newInterval
        );
    }
};
</script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

<div id="top-bootstrap-slider2" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="3000">
      Testimonial 4
    </div>
    <div class="carousel-item" data-interval="1000">
      Testimonial 5
    </div>
    <div class="carousel-item" data-interval="1000">
      Testimonial 6
    </div>
  </div>
</div>

推荐阅读