Twitter Bootstrap Karussell: Holen Sie sich die Richtung der Folie

Question

Wie kann ich feststellen, ob das Karussell nach links oder rechts? Ich habe mir die Dokumentation für die Veranstaltungen angeschaut und geschoben, aber keine relevanten Informationen über die Richtung der Folie geliefert.

Ich habe auch das Event-Objekt untersucht, das an den Event-Handler für das glide-Event übergeben wird, aber ich kann auch dort keine brauchbaren Hinweise finden.

Jede Hilfe wäre willkommen!

Answer 1

So weit wie ich sehen kann twitter Bootstrap nicht aussetzen, in welche Richtung das Karussell über das Event-Objekt bewegt. Es fügt jedoch den Elementen, die an der Folie beteiligt sind, eine "rechte" oder "linke" Klasse hinzu.

Also im Grunde sehe ich 2 Optionen. Zeigen Sie die Richtung im Ereignisobjekt an, oder suchen Sie nach der rechten oder linken Klasse für die Elemente.

Option 1:

Sie das Bootstrap-Karussell Code zu ändern haben. In dem Karussell, schiebt Funktion ändern:

e = $.Event('slide') 

zu

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

(um die Linie 337-340 in der normalen Version von bootstrap.js)

und dann können Sie die Richtung zu bekommen, so etwas wie dieses:

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

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

OR Option2:

Warten Sie einige Zeit, bis die CSS-Klasse "left" oder "right" zum Element hinzugefügt wurde und prüfen Sie, ob diese Klasse vorhanden ist.

Die Zeitüberschreitung ist erforderlich, da zwischen dem Zeitpunkt, zu dem das Ereignis ausgelöst wird und der Einstellung der linken rechten Klasse eine Wettlaufsituation besteht. Offensichtlich ist dies eine Hacker-Lösung, aber Sie müssen den Bootstrap-Code nicht ändern. Es gibt wahrscheinlich auch andere Optionen, aber ich denke, dass Option 1 die beste ist.

Edit: In der neuesten Version von Bootstrap CSS (2.1.1) Die Zeilenwechsel für Option 1 wären:

(Linie 340) aus:

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

zu:

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

Answer 2

Ab 3.0.0-rc1 funktioniert der Zugriff auf das aktive Element, das nächste Element vom Index zum Index und zur Schieberichtung. Fühlen Sie sich frei, die Spezifität Ihrer Selektoren nach Bedarf zu verringern.

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

Für twitter Bootstrap 3:

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