Bootstrap 4 Carousel: Individual data-interval on each slide

Question

I want to set the data-interval for each slide of the carousel. Here on stackoverflow I found a JavaScript snippet for this case, but it doesn\'t work well. (Twitter Bootstr

Answer 1

I modified the approach outlined in Bass Jobsen's answer for Bootstrap 3.x so that it works for the Bootstrap 4 carousel. IMO, this is a much cleaner approach than hooking into the jQuery events.

It overrides the interval set for the entire Carousel (this._config.interval), with intervals set on the individual carousel items (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