Twitter Bootstrap旋轉木馬：獲取幻燈片的方向

Question

如何確定旋轉木馬是向左還是向右滑動？我查看了滑動和滑動事件的文檔，但都沒有提供有關滑動方向的任何相關信息。

我也研究了傳遞給滑動事件的事件處理程序的事件對象，但我似乎無法找到任何有用的線索。

任何幫助，將不勝感激！

Answer 1

因此，據我所見，twitter bootstrap不會暴露傳送帶通過事件對象移動的方向。但是，它會爲幻燈片中涉及的元素添加「右」或「左」類。

所以基本上我看到2個選項。在事件對象中公開方向或在元素上查找右側或左側的類。

選項1：

你將不得不修改引導旋轉木馬代碼。在旋轉木馬，滑動功能變化：

e = $.Event('slide') 

到

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

（大約在bootstrap.js普通版的線337-340）

，然後你可以用方向是這樣的：

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

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

OR 選項2：

等待一段時間，將css「左」或「右」類添加到元素，然後檢查該類是否存在。

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

需要超時，因爲觸發事件時和設置左右類之間存在爭用條件。顯然這是一個黑客解決方案，但你不必修改引導代碼。也有其他選擇，但我覺得選項1是最好的。

編輯：在引導CSS（2.1.1）的最新版本選擇1線的變化將是：

（線340） 來自：

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

到：

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

Answer 2

從3.0.0-rc1開始，下面的工作就是從索引，索引和滑動方向訪問活動元素下一個元素。 隨意根據需要降低選擇器的特異性。

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

對於Twitter的引導3：

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