Custom Carousel Intervals?

In Bootstrap 3, with jQuery is there a way to sort by the index of my carousel and add custom intervals of each slide so that I can have one slide 10000ms and another 500ms etc? I

Solution 1:

You can create a custom attribute that denotes how long the slide should be visible for, pull that out for the active item on the slide.bs.carousel or slid.bs.carousel events (whichever you prefer/works best for you), then set it as a timeout to go to the next slide.

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

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divid="carousel-example-generic"class="carousel slide"data-ride="carousel"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li><lidata-target="#carousel-example-generic"data-slide-to="1"></li><lidata-target="#carousel-example-generic"data-slide-to="2"></li><lidata-target="#carousel-example-generic"data-slide-to="3"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"role="listbox"><divclass="item active"duration="3000"><imgsrc="http://placehold.it/400x200"alt="..." /><divclass="carousel-caption">
        First
      </div></div><divclass="item"duration="2000"><imgsrc="http://placehold.it/400x200"alt="..." /><divclass="carousel-caption">
        Second
      </div></div><divclass="item"duration="1000"><imgsrc="http://placehold.it/400x200"alt="..." /><divclass="carousel-caption">
        Third
      </div></div><divclass="item"duration="500"><imgsrc="http://placehold.it/400x200"alt="..." /><divclass="carousel-caption">
        Fourth
      </div></div></div><!-- Controls --><aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

Solution 2:

The solution given by @MattD seems to work well, alternatively you could overwrite the slide function of the carousel plugin bu using the following code:

<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))

    returnthis
  }
</script> 

The above enables you to set the interval per slide leveraging the data-interval attribute as shown below:

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

Solution 3:

The answer by @Bass didn't quite work for me. It was actually taking the interval of the slide BEFORE, so my updated version is:

functionoverwriteBootstrapCarouselCycleFunction() {
      $.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 itif(typeof duration === "undefined") duration = this.options.interval// otherwise use the default for the slideshowthis.options.interval
          && !this.paused
          && (this.interval = setInterval($.proxy(this.next, this), duration ))

        $.fn.carousel.Constructor.prototype.overwritten = truereturnthis
      }
    }


    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)
      })
    })