Carousel Boopstrap with different intervals for each slide

I understood from the comments that you want different intervals for each slide. I do not see a native form but I suggest this:

Modify the functions cycle and pause of the carousel component. That's where setInterval and clearInterval are called. The problem is that setInterval works at regular intervals, so you have to change its logic to work with setTimeout .

This implementation, takes the exposure time of each slide from a new property that adds call data-duration where you indicate the duration of the slide.

Here is a complete example: link

HTML example:

<!-- Items -->
<div class="carousel-inner">
  <div class="item active" data-duration="1500">
  </div>
  <div class="item" data-duration="3000">
  </div>
  <div class="item" data-duration="8000">
  </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;
    }

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

// con esto extendemos el componente carousel 
$.extend($[ "fn" ][ "carousel" ][ "Constructor" ].prototype, extension);

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

As for the pause when you place the mouse on the carousel, this is the default behavior. This property pause that with value 'hover' works as you want, but as I said it is the default value.

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

Two things to keep in mind:

• This solution is sensitive to any update in bootstrap.js , if you use it, before doing an update, test its operation well.

• You can not use it with the minified version (bootstrap.min.js) because it invokes methods that change their name in that version.

I'll give you this example, I think it's basically what you're looking for, I hope it works for you.

  

Apparently within stack overflow the code fragment does not run very well,   but you can run it on jsfiddle here .

// invoka el carousel
$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() {

    // Toma href, remueve el signo #, convierte a numero
    var item = Number($(this).attr('href').substring(1));

    // slide al numbero -1 (cuenta para indexado en cero)
    $('#myCarousel').carousel(item - 1);

    // remueve la clase active
    $('.carousel-linked-nav .active').removeClass('active');

    // agrega a clase active al item que se le dio click
    $(this).parent().addClass('active');

    // no sigue el link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// atacha la funcion 'slid'
$('#myCarousel').bind('slid', function() {

    // remueve clase active
    $('.carousel-linked-nav .active').removeClass('active');

    // obtiene el indice del elemento activo
    var idx = $('#myCarousel .item.active').index();

    // selecciona el elemento activo y le agrega la clase active
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="http://placehold.it/300x200/888&text=Item 1" />
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/aaa&text=Item 2" />
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/444&text=Item 3" />
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
</ol>