jQuery Carousel Stuck (Twitter Bootstrap)

Question

Tôi đã thực hiện Carousel jQuery plugin Twitter Bootstrap ở đây: http://zarin.me/circlefive/dashboard.html (xem tab phản ứng)

Các băng chuyền thường chức năng, nhưng đôi khi bị mắc kẹt. Nó đặc biệt xảy ra khi bạn tương tác với các tab khác và sau đó sử dụng tab phản hồi. Tôi nghĩ rằng nó phải làm với các tab ..

Có ai biết tại sao băng chuyền bị kẹt không?

Cảm ơn!

Answer 1

Nếu bạn kiểm tra hành vi của băng chuyền trong chrome, bạn có thể băng chuyền nếu vẫn chạy khi bạn thay đổi tab.

Và vì băng chuyền không nằm trong tab hoạt động, display: none; được áp dụng cho div cha của băng chuyền. Điều này có thể là nguyên nhân của vấn đề của bạn. (bạn kết thúc giống như ảnh chụp màn hình)

Tôi nghĩ rằng nó có thể được sửa bằng cách kích hoạt .carousel('pause') khi nhấp vào tab đầu tiên 3 và .carousel('cycle') trên tab cuối cùng trước khi hiển thị nội dung liên quan đến tab.

Answer 2

Vấn đề là dọc theo dòng của những gì @Francesco Frassinelli chỉ ra trong các bình luận, cụ thể là khi băng chuyền đang sử dụng hiệu ứng chuyển tiếp CSS3 (về cơ bản bất kỳ trình duyệt nhưng IE), nếu một băng chuyền được ẩn khi một quá trình chuyển đổi kết thúc, sự kiện $.support.transition.end sẽ không bao giờ được kích hoạt. Điều này sẽ khiến băng chuyền bị tạm ngưng trong trạng thái trượt và ngắn mạch tất cả chức năng của nó.

Trong Issue #1887@fat ném vào đề nghị của ông để ngăn ngừa nó khỏi bị mắc kẹt ở nơi đầu tiên:

"Bạn sẽ cần phải tạm dừng trình chiếu và tiếp tục nó trước/sau chuyển đổi qua lại màn hình . "

Tôi cũng đề nghị một cách giải quyết khi sử dụng một băng chuyền trong một phương thức trong Issue #3351, mà có thể dễ dàng được điều chỉnh đối với trường hợp sử dụng của bạn:

$('a[href="#responses-1"]').on('shown', function() { 
    var $carousel = $('.carousel'); 

    if ($carousel.data('carousel') && $carousel.data('carousel').sliding) { 
     $carousel.find('.active').trigger($.support.transition.end); 
    } 
}); 

này về cơ bản chỉ mở băng chuyền khi nó trở nên rõ ràng nếu nó sẽ bị đình chỉ.

Vì hành vi xấu này xảy ra trên nhiều trường hợp khác nhau, tôi đã đưa ra đề xuất trong Issue #3351 về tính khả thi của giải pháp vĩnh viễn tiềm năng có thể được tích hợp trực tiếp vào mã plugin bootstrap-carousel.js. Nếu bất cứ ai nghĩ rằng đó là một ý tưởng hay, hoặc có ý tưởng khác về cách thực hiện nó, vấn đề đó vẫn còn mở, vì vậy phản hồi được hoan nghênh.