Bootstrap 3.0 Carousel with multiple intervals

Using different intervals for each slide.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Carousel -->
<div id="carousel-publicidad" class="carousel slide">
  <!-- Menu -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Items -->
  <div class="carousel-inner">

    <!-- Item 1 -->
    <div class="item active" data-duration="1500">
      <img src="http://lorempixel.com/1500/600/abstract/1" />
      <div class="container">
        <div class="carousel-caption">
          <h1>Duración 1500</h1>
          <p>Este slide permanece 1500 ms activo.</p>
        </div>
      </div>
    </div>

    <!-- Item 2 -->
    <div class="item" data-duration="3000">
      <img src="http://lorempixel.com/1500/600/abstract/2" />
      <div class="container">
        <div class="carousel-caption">
          <h1>Duración 3000</h1>
          <p>Este slide permanece 3 seg. activo.</p>
        </div>
      </div>
    </div>

    <!-- Item 3 -->
    <div class="item" data-duration="8000">
      <img src="http://lorempixel.com/1500/600/abstract/3" />
      <div class="container">
        <div class="carousel-caption">
          <h1>Duración 8000</h1>
          <p>Este slide permanece 8 seg. activo.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>

</div>
<div>

JavaScript

var extension = {
  cycle: function(e, extra) {
    e || (this.paused = false)

    this.interval && clearTimeout(this.interval)

    var nextInterval;
    var $active = this.$element.find('.item.active')
    if (!extra) {
      nextInterval = $active.data("duration") || this.options.interval;
    } else {
      var $next = this.getItemForDirection('next', $active)
      nextInterval = $next.data("duration") || this.options.interval;
    }

    console.log(nextInterval);

    !this.paused && (this.interval = setTimeout($.proxy(this.nextProxy, this), nextInterval))

    return this
  },
  pause: function(e) {
    e || (this.paused = true)

    if (this.$element.find('.next, .prev').length && $.support.transition) {
      this.$element.trigger($.support.transition.end)
      this.cycle(true)
    }
    this.interval = clearTimeout(this.interval)

    return this
  },
  nextProxy: function() {
    this.next()
    this.cycle(true, true)
  }
}

$.extend($["fn"]["carousel"]["Constructor"].prototype, extension);

$(function() {
  $('#carousel-publicidad').carousel();
});