En el Twitter Bootstrap Carrusel, ¿cómo puedo hacer que una determinada diapositiva tiene una duración diferente de los demás?

Puedo cambiar todo el control deslizante de duración con el «intervalo» de los parámetros, pero no sabes cómo establecer una duración personalizado para una diapositiva concreta.

  • Sé que es más de un año, pero estoy muy feliz de haber encontrado una solución fácil para este problema de la bruja es todavía un problema aún hoy en día. Espero que mi respondemos es útil para usted.
  • Véase también Bootstrap personalizado carrusel intervalos
InformationsquelleAutor Rafa Mérida | 2013-01-09

4 Comentarios

  1. 4

    Bootstrap 3.1 carrusel de no permitir la diferente duración de cada diapositiva, pero ofrece un método y uno de los eventos que podemos utilizar con el fin de ahieve este.

    Vamos a utilizar el slid.bs.carousel caso de detectar cuando el carrusel ha completado su transición de diapositiva y el .carousel('pause') opción para detener el carrusel de la bicicleta a través de los elementos.

    Vamos a utilizar este atributo data-interval="x" en cada carrusel elemento con diferente tiempo de duración, por lo que nuestro html tendrá un aspecto como este por ejemplo:

    <div class="carousel-inner">
        <div class="active item" data-interval="3000">
            <img src="Url 1" />
        </div>
        <div class="item" data-interval="6000">
            <img src="Url 2" />
        </div>
        <div class="item" data-interval="9000">
            <img src="Url 3" />
        </div>
    </div>

    Ahora, todo lo que tenemos que hacer es:

    1. detectar cuando un nuevo elemento se muestra el uso de la slid.bs.carousel
      evento
    2. comprobar su duración
    3. pausa el carrusel utilizando .carousel('pause')
    4. establecer un tiempo de espera con la duración de la partida y después de la duración
      completado debemos reanudar el carrusel

    El código javascript que se parecerá a esto:

    var t;
    
    var start = $('#myCarousel').find('.active').attr('data-interval');
    t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);
    
    $('#myCarousel').on('slid.bs.carousel', function () {   
         clearTimeout(t);  
         var duration = $(this).find('.active').attr('data-interval');
    
         $('#myCarousel').carousel('pause');
         t = setTimeout("$('#myCarousel').carousel();", duration-1000);
    })
    
    $('.carousel-control.right').on('click', function(){
        clearTimeout(t);   
    });
    
    $('.carousel-control.left').on('click', function(){
        clearTimeout(t);   
    });

    Como se puede ver, estamos obligados al principio para agregar un inicio de intervalo y me he puesto a 1000ms pero puedo quitar cada vez que hago una pausa en el carrusel duration-1000. Yo he utilizado las siguientes líneas para resolver el primer problema del elemento debido a que el elemento no fue agarrado por el slid event.

    var start = $('#myCarousel').find('.active').attr('data-interval');
    t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

    También me di cuenta de que si el usuario presiona las flechas, el tiempo de espera es de locos, por eso tengo claro que el tiempo de espera cada vez que el usuario pulse en la flecha izquierda y derecha.

    Aquí está mi ejemplo vivo http://jsfiddle.net/paulalexandru/52KBT/, espero que esta respuesta fue útil para usted.

    • He intentado esto pero no se pudo obtener carousel('pause') a trabajar a todos en la diapositiva.bs.carrusel de eventos. He probado todo lo posible y nunca pausa – seguí en el ciclo. Mi solución fue muy similar a la suya en lugar de utilizar carousel('next') junto con setTimeout y data-interval atributo. Gracias por señalarme en la dirección correcta.
    • Son bienvenidos. El carrusel(‘pause’) opción está trabajando en todos los casos, usted puede consultar la documentación aquí getbootstrap.com/javascript/#carousel-usage . La mayoría de ustedes probablemente tiene algunos errores en el código. Debe uno trabajar sin ningún problema. Si usted tira de su código y mantener el carrusel, o incluso si usted trata de un espacio en blanco ejemplo en jsfiddle, usted verá el trabajo. Yo no recomand usar setTimeout porque si presiona las flechas, la duración podría ir loco. Cualquier momento es mejor utilizar el bootstrap carrusel de opciones.
    • ¿cómo te las arreglas? cómo configurar el tiempo para la primera diapositiva
    • datos de intervalo=»3000″
  2. 0

    Que usted necesita para establecer el intervalo de principal div como datos de intervalo de la etiqueta. Así que se está trabajando muy bien y se puede dar de tiempo diferentes a diferentes diapositivas.

    <!--main div -->
    <div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div role="listbox" class="carousel-inner">
        <div class="item">
          <a class="carousel-image" href="#">
            <img alt="image" src="image.jpg">
          </a>
        </div>
      </div>
    </div>
    • Por favor, dar un ejemplo de intervalos diferentes para las distintas diapositivas.
    • No veo cómo esto podría funcionar para diferentes intervalos en diferentes diapositivas… pero resuelto lo que yo estaba tratando de hacer, es cambiar el intervalo de más de TODAS las diapositivas. Así que gracias por la simple post para esto.
  3. -1

    No podía conseguir carousel('pause') a trabajar al interior de bootstrap controladores de eventos. No estoy seguro de por qué potencialmente fue debido a la dinámica de representación de las diapositivas con KnockoutJS o tal vez un error en Bootstrap (supongo que es mi código).

    Con el fin de establecer una diapositiva individual del intervalo independiente de amigos en el carrusel he utilizado el slid.bs.carousel evento surgió de inicio junto con el uso de setTimeout para establecer el intervalo basado en el elemento del data-interval atributo y manualmente llamando a la carousel('next') método.

    JS

    //slide event
    $('.carousel').on('slid.bs.carousel', function () {
        var carouselData = $(this).data('bs.carousel');
        var currentIndex = carouselData.getActiveIndex();
    
        window.setTimeout(function() {
            $('.carousel').carousel('next');
        }, $(carouselData.$items[currentIndex]).data('interval'));
    });
    
    //init carousel
    $('.carousel').carousel({
        interval: false
    });
    
    //set initial timeout for active slide data-interval
    window.setTimeout(function () {
        $('.carousel').carousel('next');
    }, $('.carousel .active').data('interval'));

    HTML

    <div class="carousel">
      <div class="carousel-inner">
        <div id="slide1" class="item active" data-interval="5000">{{content}}</div>
        <div id="slide2" class="item" data-interval="10000">{{content}}</div>
        <div id="slide3" class="item" data-interval="10000">{{content}}</div>
      </div>
    </div>

    En este ejemplo #slide1 será el de la diapositiva inicial en su carrusel y mostrará durante 5 segundos. Después de 5 segundos se deslizará a #slide2.

    #slide2 hará una pausa de 10 segundos, antes de deslizar para #slide3. Y así sucesivamente. Y así sucesivamente…

  4. -2

    Si usted todavía no ha encontrado una solución, he modificado el Bootstrap carousel.js para agregar esta funcionalidad.

    1. Agregar atributo opcional (de datos intervalo de) a «elemento» de la clase elemento.

      <div class="active item" data-interval="6000">

    2. Modificar carousel.js

      • Agregar indicador para determinar el primer ciclo

        var Carrusel = function (elemento, options) { 
        este.$elemento = $(elemento) 
        este.$indicadores de = este.$elemento.find('.carrusel-indicadores') 
        este.options = opciones 
        este.pausa = 
        este.deslizamiento = 
        este.intervalo = 
        este.$activo = 
        este.$elementos = null 
        //[TODO Kevin] Añadido COMENZAR 
        este.isFirstCycle= true 
        //[TODO Kevin] Añadido COMENZAR 
        
        este.opciones.pausa == 'hover' && esta.$elemento 
        .en('mouseenter', $.proxy(de esto.pausa, este)) 
        .en('mouseleave', $.proxy(de esto.ciclo)) 
        } 
        
      • Modificar la función del CICLO de

         Carousel.prototype.cycle =  function (e) {
         e || (this.paused = false)
        
         this.interval && clearInterval(this.interval)
         //[TODO Kevin] Modified - BEGIN
         //this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
        
         if (this.options.interval && !this.paused) {
           var $active = this.$element.find('.item.active');
        
           /**CUSTOM ITEM INTERVAL**/
           if ($active.data('interval')) {
             var customInterval;
        
             /*On First Cycle*/
             if(this.isFirstCycle) {
               //Get ACTIVE ITEM interval
               customInterval = $active.data('interval');
               this.isFirstCycle = false;
        
             /*On Suceeding Cycles*/
             } else {
               //Get NEXT ITEM interval
               var $next = $active['next']();
        
               if (!$next.length) {
                 if (!this.options.wrap) return this
                 $next = this.$element.find('.item')['first']()
               }
        
               customInterval = $next.data('interval');
             }
        
             this.interval = setInterval($.proxy(this.next, this), customInterval);
        
           /**DEFAULT INTERVAL**/
           } else {
             this.interval = setInterval($.proxy(this.next, this), this.options.interval);
           }
         }
         //[TODO Kevin] Modified - END
        
         return this
         }

    Ejemplo: JS Violín

    • Casi allí, pero usted no desea modificar Bootstrap núcleo (o al menos no deberías querer)

Dejar respuesta

Please enter your comment!
Please enter your name here