自定义轮播间隔？

Question

在 Bootstrap 3 中，使用 jQuery 是否可以按轮播的索引进行排序并添加每张幻灯片的自定义间隔，以便我可以有一张幻灯片 10000 毫秒和另一张 500 毫秒等？

我知道您可以设置 data-interval 属性，但这会设置所有幻灯片的速度，因为您无法为每个项目添加自定义间隔属性。

data-interval="3000"

我的轮播设置如下：

<div id="carousel" class="carousel slide">

     <div class="carousel-inner">

    <div class="item active">
        <a href="#">
              <img class="img-responsive" src="">
        </a>
    </div>

    <div class="item">
        <a href="#">
             <img class="img-responsive" src="">
        </a>
    </div>

    <div class="item">
        <a href="#">
             <img class="img-responsive" src="">
        </a>
    </div>

    <div class="item">
        <a href="#" >
            <img class="img-responsive" src="">
        </a>
    </div>
</div>

Answer 1

您可以创建一个自定义属性来表示幻灯片应该可见多长时间，将其拉出用于slide.bs.carousel 或slid.bs.carousel 事件上的活动项目（无论您喜欢/最适合您），然后设置进入下一张幻灯片的超时时间。

$('#carousel-example-generic').on('slide.bs.carousel', function() {
  var interval = $('div.item.active').attr('duration');
  setTimeout(function() {
    $('.carousel').carousel('next');
  }, interval);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" duration="3000">
      <img src="http://placehold.it/400x200" alt="..." />
      <div class="carousel-caption">
        First
      </div>
    </div>
    <div class="item" duration="2000">
      <img src="http://placehold.it/400x200" alt="..." />
      <div class="carousel-caption">
        Second
      </div>
    </div>
    <div class="item" duration="1000">
      <img src="http://placehold.it/400x200" alt="..." />
      <div class="carousel-caption">
        Third
      </div>
    </div>
    <div class="item" duration="500">
      <img src="http://placehold.it/400x200" alt="..." />
      <div class="carousel-caption">
        Fourth
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 2

@MattD 给出的解决方案似乎效果很好，或者您可以使用以下代码覆盖轮播插件 bu 的滑动功能：

<script src="js/carousel.js"></script>
<script>
  $.fn.carousel.Constructor.prototype.cycle = function (e) {

    e || (this.paused = false)
    this.interval && clearInterval(this.interval)

    this.options.interval
      && !this.paused
      && (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval))

    return this
  }
</script> 

以上内容使您可以利用data-interval 属性设置每张幻灯片的间隔，如下所示：

<div class="item" data-interval="500">

Answer 3

@Bass 的回答对我来说不太奏效。它实际上是在使用幻灯片之前的interval，所以我的更新版本是：

    function overwriteBootstrapCarouselCycleFunction() {
      $.fn.carousel.Constructor.prototype.cycle = function (e) {

        e || (this.paused = false)
        this.interval && clearInterval(this.interval)

        var element_to_slide;
        var duration;


        if (this.$element.find('.item.next').size() === 1) { // once the first slide has started the interval until the next call is on the slide with the 'next' class
          element_to_slide = this.$element.find('.item.next')
        } else {
          element_to_slide = this.$element.find('.item.active') // just before the cycle starts, there is no 'next' but the first slide is marked active, use that
        }

        duration = element_to_slide.data('interval')                          // if the element has a pre-configured interval use it
        if(typeof duration === "undefined") duration = this.options.interval  // otherwise use the default for the slideshow

      
        this.options.interval
          && !this.paused
          && (this.interval = setInterval($.proxy(this.next, this), duration ))

        $.fn.carousel.Constructor.prototype.overwritten = true

        return this
      }
    }


    document.addEventListener('DOMContentLoaded', () => {
      if (!$.fn.carousel.Constructor.prototype.overwritten)
        overwriteBootstrapCarouselCycleFunction()

      var id = '#{carousel_id}'

      $('#' + id + ' #pause-control').click(function(){
        pauseSlideshow(id)
      })

      $('#' + id + ' #play-control').click(function(){
        playSlideshow(id)
      })
    })