Twitter Bootstrap carousel: ottenere la direzione della diapositiva

Question

Come determinare se la giostra scorre a sinistra oa destra? Ho esaminato la documentazione per gli eventi scivolati e scorrevoli, ma non fornisco alcuna informazione pertinente sulla direzione della diapositiva.

Ho anche esaminato l'oggetto evento che viene passato al gestore eventi per l'evento slid, ma non riesco a trovare alcun indizio utile neanche lì.

Qualsiasi aiuto sarebbe apprezzato!

Answer 1

Quindi, per quanto posso vedere, il bootstrap di Twitter non espone quale direzione il carosello si sta muovendo tramite l'oggetto evento. Tuttavia, aggiunge una classe "giusta" o "sinistra" agli elementi coinvolti nella diapositiva.

Quindi fondamentalmente vedo 2 opzioni. Esporre la direzione nell'oggetto evento o cercare la classe destra o sinistra sugli elementi.

Opzione 1:

Si dovrà modificare il codice di bootstrap giostra. Nella giostra, scorrere cambiamento di funzione:

e = $.Event('slide') 

a

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

(intorno alla linea 337-340 nella versione normale di bootstrap.js)

e allora si può ottenere con la direzione qualcosa di simile:

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

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

O Option2:

Attendere un po 'di tempo per la classe css "left" o "right" da aggiungere all'elemento e quindi verificare se tale classe è 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); 
}); 

necessario il timeout perché c'è una condizione di competizione tra quando l'evento viene attivato e quando sono impostati le classi destro e sinistro. Ovviamente questa è una soluzione hackyer, ma non è necessario modificare il codice di bootstrap. Ci sono probabilmente anche altre opzioni, ma ritengo che l'opzione 1 sia la migliore.

Edit: Nella versione più recente di bootstrap css (2.1.1) La variazione linea per l'opzione 1 sarebbe:

(linea 340) da:

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

a:

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

Answer 2

A partire dalla 3.0.0-rc1, il seguente funziona per accedere all'elemento attivo, all'elemento successivo, dall'indice all'indice e alla direzione della diapositiva. Sentiti libero di diminuire la specificità dei tuoi selettori secondo necessità.

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

a Twitter bootstrap 3:

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