6

Hola que tal estoy haciendo un banner con el carousel que viene en boopstrap, los requerimientos indican que cada slide debe durar un tiempo determinado y que cuando pose el mouse sobre uno de los slides este debe pausar.

HTML:

    <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>
        
    </ol>

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

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

        <div class="item d3d">

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

    </div>

</div>

Y este es mi Javascript, he tratado de todo para que pause y se que parece una tarea sencilla pero no he podido agradecería cualquier ayuda

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

 $('#carousel-publicidad').carousel('pause');
 setTimeout("$('#carousel-publicidad').carousel();", duration-1000);
 
})
2
  • Quieres que se pause continuamente o por un intervalo de tiempo?
    – Alvaro Montoro
    el 8 feb. 2016 a las 2:37
  • Puedes aclarar si los intervalos de tiempo de cada slide son diferentes entre si? el 8 feb. 2016 a las 13:41

2 respuestas 2

2

Te dejo este ejemplo, creo que es básicamente lo que estas buscando, ojala te sirva.

Al parecer dentro de stack overflow el fragmento de codigo no corre muy bien, pero puedes correrlo en jsfiddle aqui.

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

1
  • fijate en los comentarios, el OP, quiere que los intervalos sean diferentes entre las diapositivas. el 8 feb. 2016 a las 14:48
1

Entendí por los comentarios que quieres intervalos diferentes para cada diapositiva. No veo una forma nativa pero te sugiero esto:

Modifica las funciones cycle y pause del componente carousel. Ahí es donde se llama a setInterval y clearInterval. El problema es que setInterval funciona a intervalos regulares, así que hay que cambiar su lógica para que funcione con setTimeout.

Esta implementación, toma el tiempo de exposición de cada diapositiva desde una nueva propiedad que agregue llamada data-duration donde indicas la duración de la diapositiva.

Aquí tienes un ejemplo completo: https://jsfiddle.net/rnrlabs/70k5jL11/

Ejemplo HTML:

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

En cuanto a la pausa cuando ubicas el mouse sobre el carousel, este es el comportamiento por defecto. Esta la propiedad pause que con valor 'hover' funciona como quieres, pero como dije es el valor por defecto.

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

Dos cosas a tener en cuenta:

  • Esta solución es sensible a cualquier actualización en bootstrap.js, si la usas, antes de hacer una actualización, prueba bien su funcionamiento.

  • No puedes utilizarla con la version minificada (bootstrap.min.js) ya que invoca métodos que cambian de nombre en dicha version.

5
  • Hola que tal gracias por responder, si pausa esa linea pero solo el primer elemento del slide, el slide.bs.carousel se lo necesito porq cada vez que finaliza el slide inicia la funcion, por esto cada slide tiene una duracion distinta, sin emabrgo la pausa no sirve con los otros slides, en tu ejemplo funciona porque cada slide tiene un intervalo de 2000 el 8 feb. 2016 a las 0:54
  • @CristianTAC acabo de modificar mi respuesta para que las diapositivas funionen a intervalos diferentes entre si. el 8 feb. 2016 a las 14:48
  • Hey muchas gracias con esas funcioes modificadas si me funciona muhas gracias :) . el 9 feb. 2016 a las 14:53
  • Hola, estoy tratando de implementar tu solicion pero obtengo el siguiente error: Uncaught TypeError: Cannot read property 'find' of undefine, podrias orientarme. estoy usando Bootstrap v4.0.0 y Jquery 3.3.1 gracas de ante mano
    – luis_am92
    el 2 ago. 2021 a las 22:29
  • Tendrías que revisar como funciona ahora el carrusel y así ver que cambios hacer. En principio se me ocurre que this.$element no esta definido, quiza ahora tiene otro nombre o puede que sea totalmente diferente. No puedo ahorita ayudarte mas con esto. el 3 ago. 2021 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.