Twitter Carrusel Bootstrap: obtenga la dirección de la diapositiva

Question

¿Cómo puedo determinar si el carrusel se desliza hacia la izquierda o hacia la derecha? Revisé la documentación de los eventos slides y slide, pero tampoco proporcioné información relevante sobre la dirección de la diapositiva.

También he examinado el objeto de evento que se pasa al controlador de eventos para el evento slid, pero parece que tampoco puedo encontrar pistas útiles.

¡Cualquier ayuda sería apreciada!

Answer 1

Por lo que puedo ver, twitter bootstrap no expone en qué dirección se mueve el carrusel a través del objeto del evento. Sin embargo, sí agrega una clase "derecha" o "izquierda" a los elementos involucrados en la diapositiva.

Así que, básicamente, veo 2 opciones. Exponga la dirección en el objeto de evento o busque la clase derecha o izquierda en los elementos.

Opción 1:

Usted tendrá que modificar el código de arranque carrusel. En el carrusel, deslice cambio de función:

e = $.Event('slide') 

a

e = $.Event('slide', {direction: direction}) 

(alrededor de la línea 337-340 en la versión normal de bootstrap.js)

y entonces se puede obtener la dirección con algo como esto:

var $carousel = $('.carousel'); 
$carousel.carousel(); 

$carousel.bind('slide', function(e) { 
    console.log("e.direction = " + e.direction); 
}); 

O Opción 2:

Espere un momento para que la clase css "left" o "right" se agregue al elemento y luego verifique si esa clase está presente.

var $carousel = $('.carousel'); 
$carousel.carousel(); 

$carousel.bind('slide', function(e) { 

    setTimeout(function(){ 
    var left = $carousel.find('.item.active.left'); 
    var right = $carousel.find('.item.active.right'); 
    if(left.length > 0) { 
     console.log('left'); 
    } 
    else if(right.length > 0) { 
     console.log('right'); 
    } 
    }, 500); 
}); 

necesito el tiempo de espera porque no hay una condición de carrera entre el momento en el evento se activa y cuando se establecen las clases de derecha e izquierda. Obviamente, esta es una solución de hackyer, pero no es necesario modificar el código de arranque. Probablemente también haya otras opciones, pero creo que la opción 1 es la mejor.

Editar: En la última versión del css de arranque (2.1.1) El cambio de línea para la opción 1 sería:

(línea 340) de:

, e = $.Event('slide', { 
    relatedTarget: $next[0] 
}) 

a:

, e = $.Event('slide', { 
    relatedTarget: $next[0], 
    direction: direction 
}); 

Answer 2

A partir de 3.0.0-rc1, lo siguiente funciona para acceder al elemento activo, al siguiente elemento, desde el índice, al índice y a la dirección de deslizamiento. Siéntase libre de disminuir la especificidad de sus selectores según sea necesario.

carousel.on('slide.bs.carousel', function (event) { 

    var active = $(event.target).find('.carousel-inner > .item.active'); 
    var from = active.index(); 
    var next = $(event.relatedTarget); 
    var to = next.index(); 
    var direction = event.direction; 

}); 

Answer 3

Para arranque Twitter 3:

$('#myCarousel').on('slide.bs.carousel', function (event) { 
    alert(event.direction); 
});