2012-07-20 23 views
5

he implementado carrusel jQuery plugins de Twitter Bootstrap aquí: http://zarin.me/circlefive/dashboard.html (ver la pestaña respuestas)jQuery carrusel Stuck (Twitter Bootstrap)

El carrusel generalmente funciones, pero en ocasiones se queda atascado. Esto ocurre especialmente cuando interactúas con las otras pestañas y luego usas la pestaña de respuestas. Creo que tiene que ver con las pestañas ...

¿Alguien sabe por qué el carrusel se atasca?

Gracias!

+3

Relacionados: [número 1887] (https://github.com/twitter/bootstrap/issues/1887), [número 2196] (https://github.com/twitter/bootstrap/issues/2196), [ pregunta: cómo combinar pestañas y carrusel] (http://stackoverflow.com/questions/12327796/how-to-combine-tabs-and-carousel-in- twitter-bootstrap/12332045) –

Respuesta

0

Si inspecciona el comportamiento del carrusel en cromo, puede utilizar el carrusel si aún se está ejecutando al cambiar de pestaña.

Y como el carrusel no está en la pestaña activa, se aplica display: none; al div principal del carrusel. Esta puede ser la causa de tu problema. (Usted termina como la captura de pantalla)

Creo que se puede arreglar disparando .carousel('pause') al hacer clic en la 3 primera pestaña y .carousel('cycle') en la última pestaña antes de mostrar el contenido relacionado con la pestaña.

carousel stuck

3

La cuestión es a lo largo de las líneas de lo @Francesco Frassinelli señaló en el comentario, a saber, que cuando el carrusel está utilizando transiciones CSS3 (básicamente cualquier navegador IE) pero, si un carrusel se oculta cuando una La transición finaliza, el evento $.support.transition.end nunca se activa. Esto causará que el carrusel se suspenda en el estado con deslizamiento y cortocircuite toda su funcionalidad.

En Issue #1887@fat tiraron en su sugerencia para evitar que se atasque en el primer lugar:

"Tendrá que hacer una pausa en la presentación de diapositivas y reanude antes/después de cambiar la visualización "

También sugirió una solución para cuando se utiliza un carrusel en un referente en Issue #3351, que podría ser fácilmente adaptado para su caso de uso:

$('a[href="#responses-1"]').on('shown', function() { 
    var $carousel = $('.carousel'); 

    if ($carousel.data('carousel') && $carousel.data('carousel').sliding) { 
     $carousel.find('.active').trigger($.support.transition.end); 
    } 
}); 

Esto, básicamente, sólo desbloquea el carrusel cuando se hace visible si sucede estar suspendido.

Dado que este mal comportamiento se produce a través de muchos escenarios de manera diferente, me hizo una sugerencia en Issue #3351 en cuanto a la viabilidad de una posible solución permanente que pudiera integrarse directamente en el arranque -carousel.js código plugin. Si alguien piensa que es una buena idea, o tiene otras ideas sobre cómo lograrlo, ese tema aún está abierto, por lo que los comentarios son bienvenidos.