Carousel Boopstrap with different intervals for each slide


Hello, I am doing a banner with the carousel that comes in boopstrap, the requirements indicate that each slide should last a certain time and that when I put the mouse on one of the slides it should pause.


    <div id="carousel-publicidad" class="carousel slide" data-ride="carousel1" >
    <ol class="carousel-indicators">
        <li data-target="#carousel-publicidad" data-slide-to="0" class="active" data-interval="6000" ></li> 
        <li data-target="#carousel-publicidad" data-slide-to="1" data-interval="3000" ></li>
        <li data-target="#carousel-publicidad" data-slide-to="2" data-interval="9000"></li>


    <div class="carousel-inner" role="listbox">

        <div class="item active d1d"> <!--se llama a la clase active -->

            <div clas="carousel-caption"><h4>Banner1</h4></div>

        <div class="item d2d">

            <div clas="carousel-caption"><h4>Banner2</h4></div>

        <div class="item d3d">

            <div clas="carousel-caption"><h4>Banner3</h4></div>



And this is my Javascript, I have tried everything to pause and I know it seems a simple task but I could not appreciate any help

$('#carousel-publicidad').carousel({interval: 6000});
$('#carousel-publicidad').on('', function () {   
 var duration = $(this).find('.active').attr('data-interval');

 setTimeout("$('#carousel-publicidad').carousel();", duration-1000);

asked by CristianTAC 07.02.2016 в 23:38

2 answers


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 class="item" data-duration="3000">
  <div class="item" data-duration="8000">


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

    this.interval && clearTimeout(this.interval)

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

      && (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.interval = clearTimeout(this.interval)

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

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

$(function() {

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.

answered by 08.02.2016 / 01:14

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
  interval: 3000


$('.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

    // no sigue el link
    return false;


// 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').index();

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

@import url('//');

#myCarousel {
  margin-top: 40px;

.item img {
  display: block; 
  margin: 0 auto;

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
<link href="//" rel="stylesheet"/>
<script src=""></script>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src=" 1" />
    <div class="item">
        <img src=" 2" />
    <div class="item">
        <img src=" 3" />
  <!-- 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>

<!-- 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>
answered by 08.02.2016 в 07:46