Twitter Bootstrap carousel: ottieni la direzione della diapositiva

Come posso 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’object evento che viene passato al gestore di eventi per l’evento slid, ma non riesco a trovare alcun indizio utile neanche lì.

Qualsiasi aiuto sarebbe apprezzato!

Quindi, per quanto posso vedere, il bootstrap di Twitter non espone la direzione in cui il carosello si muove attraverso l’object evento. Tuttavia, aggiunge una class “giusta” o “sinistra” agli elementi coinvolti nella diapositiva.

Quindi fondamentalmente vedo 2 opzioni. Esporre la direzione nell’object evento o cercare la class destra o sinistra sugli elementi.

Opzione 1:

Dovrai modificare il codice del carosello di bootstrap. Nel carosello, la funzione di scorrimento cambia:

e = $.Event('slide') 

a

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

(attorno alla riga 337-340 nella versione normale di bootstrap.js)

e quindi puoi ottenere la direzione con qualcosa del genere:

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

OPPURE Opzione2:

Aspetta un po ‘di tempo per la class css “left” o “right” da aggiungere all’elemento e poi controlla se quella class è 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é esiste una condizione di competizione tra quando viene triggersto l’evento e quando vengono impostate le classi left right. 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.

Modifica: nell’ultima versione di bootstrap css (2.1.1) Il cambio di riga per l’opzione 1 sarebbe:

(riga 340) da:

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

a:

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

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 selezionatori 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; }); 

Per twitter bootstrap 3:

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