Băng chuyền Bootstrap Twitter: lấy hướng của slide

Question

Làm cách nào để xác định băng chuyền có trượt sang trái hay phải không? Tôi đã xem tài liệu hướng dẫn cho các sự kiện trượt và trượt, nhưng không cung cấp bất kỳ thông tin liên quan nào về hướng của trang chiếu.

Tôi cũng đã kiểm tra đối tượng sự kiện được chuyển đến trình xử lý sự kiện cho sự kiện trượt, nhưng tôi dường như không tìm thấy bất kỳ manh mối hữu ích nào ở đó.

Mọi trợ giúp sẽ được đánh giá cao!

Answer 1

Vì vậy, theo như tôi có thể thấy phần khởi động twitter không lộ ra hướng băng chuyền di chuyển qua đối tượng sự kiện. Tuy nhiên, nó cần thêm một lớp "đúng" hoặc "trái" vào các phần tử liên quan đến trang chiếu.

Vì vậy, về cơ bản tôi thấy 2 tùy chọn. Phơi bày hướng trong đối tượng sự kiện hoặc tìm lớp bên phải hoặc bên trái trên các phần tử.

Lựa chọn 1:

Bạn sẽ phải thay đổi mã băng chuyền bootstrap. Trong băng chuyền, trượt chức năng thay đổi:

e = $.Event('slide') 

để

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

(khoảng dòng 337-340 trong phiên bản bình thường của bootstrap.js)

và sau đó bạn có thể nhận được sự chỉ đạo với một cái gì đó như thế này:

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

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

HOẶC OPTION2:

Đợi chút thời gian cho lớp "trái" hoặc "phải" css được thêm vào phần tử và sau đó kiểm tra xem lớp đó có tồn tại hay không.

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

Cần hết thời gian chờ vì có điều kiện cuộc đua giữa khi sự kiện được kích hoạt và khi lớp học bên phải được đặt. Rõ ràng đây là một giải pháp hackyer, nhưng bạn không phải sửa đổi mã bootstrap. Có lẽ các lựa chọn khác nữa, nhưng tôi cảm thấy lựa chọn 1 là tốt nhất.

Edit: Trong phiên bản mới nhất của bootstrap css (2.1.1) Sự thay đổi dòng cho phương án 1 sẽ là:

(dòng 340) từ:

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

tới:

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

Answer 2

Tính đến 3.0.0-rc1, sau đây hoạt động để truy cập vào phần tử tích cực, yếu tố tiếp theo, từ chỉ số, chỉ mục, và hướng chiếu. Hãy giảm độ đặc hiệu của bộ chọn của bạn nếu cần.

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

Đối twitter bootstrap 3:

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