Bạn đang tạo slide với carousel của Bootstrap, trong ứng dụng của bạn có sử dụng ajax để lấy dữ liệu động. Hệ thống sẽ không chuyển tiếp cho bạn đến slide trước hoặc là sau mặc dù bạn đã nhấn chuột vào các nút điều khiển. Bài viết này mình sẽ hướng dẫn cho bạn cách để khắc phục tình trạng slide không chuyển tiếp khi nhấn nút điều khiển trong Bootstrap Carousel.
Trong ví dụ này mình sẽ lấy dữ liệu động bằng Ajax như đã nói bên trên. Nghĩa là bây giờ mình sẽ có các tab điều khiển, bên trong đó là các bài viết được truy vấn từ cơ sở dữ liệu. Nếu như trong ứng dụng của mình có nhiều tab, mỗi tab là một carousel, và trong 1 slide thì mình có 3 bài viết chẳng hạn. Vậy thì nếu như mỗi carousel của mình có 30 bài viết, mỗi slide hiển thị 3 bài viết, vậy là mình có 10 trang slide. Tương tự như vậy, nếu mình có 10 tab với số lượng bài viết được hiển thị như thế, cách duy nhất mình làm để giảm thiếu thời gian load trang đó là sử dụng ajax để tải dữ liệu sau khi người dùng click vào từng tab.
Nếu mọi thứ được xử lỳ đều tốt hết, nghĩa là khi bạn click vào từng tab thì dữ liệu sẽ được load hiển thị ra ngoài. Bạn chỉ gặp một vấn đề duy nhất đó là các nút điều khiển tiến và lùi của carousel không hoạt động, bạn hãy mở tập tin javascript đang được sử dụng lên và thêm vào dòng code sau:
(function(){
$('.carousel-control').live('click', function(e){
var that = $(this),
carousel_id = that.attr('href'),
carousel_container = $(carousel_id);
carousel_container.removeData('carousel');
carousel_container.carousel(that.attr('data-slide'));
});
})();
Mình sử dụng sự kiện live ở đây là vì các nút điều khiển mình sẽ append cùng lúc với dữ liệu khi các tab được nhấn chọn. Bạn chỉ cần xác định carousel cần xử lý và xóa đi carousel hiện tại, sau đó khởi tạo lại carousel bằng cách dùng hàm carousel. Cuối cùng là đối số truyền vào bạn lựa chọn tiến tới hoặc lui tùy thuộc vào nút điều khiển mà người dùng đã nhấn trước đó.
