Băng chuyền con cú - chiều rộng tự động, mục cuối cùng được lấy ra từ ngăn xếp

Question

Tôi đang gặp sự cố lạ với OWL CAROUSEL 2. Tôi đang tạo băng chuyền đơn giản cho 12 bảng, nhưng khi sử dụng tùy chọn "autoWidth", bảng cuối cùng được lấy ra từ carousel stack.

DEMO

Nếu bạn mở fiddle, có băng chuyền cho mỗi tháng trong năm. Vào cuối băng chuyền, không có tháng 12, nhưng nếu bạn kiểm tra mã nguồn, bạn có thể thấy rằng tháng 12 có ở đó. Đối với một số lý do OWL carousel plugin là kéo tháng mười hai ra.

Bất kỳ ý tưởng nào? Trước, cảm ơn nhiều!

Answer 1

Tôi cũng đã gặp sự cố này. Tôi đã sửa nó theo cách xấu, nhưng nó hoạt động. trong cả hai trình duyệt. Sự cố xảy ra với yếu tố owl-stage. Các owl carousel lib tính tài sản chiều rộng, nhưng các mục không phù hợp trong wrapper. Vì vậy, tôi phải gọi một hàm sau khi sự kiện init xảy ra và thêm khoảng 100px vào nó. tôi đã sử dụng chức năng setTimeout với cách tiếp cận này xấu .Very tôi biết, nhưng trong dự án của tôi có rất nhiều các chức năng js xảy ra và không allways có được quyền sở hữu width (đôi khi tôi nhận được undefined)

Vì vậy, mã này là:

$('.owl-carousel').owlCarousel({ 
     margin:90, 
     nav:true, 
     dots:true, 
     autoWidth:true, 
     afterInit: setWidth() 
    }); 

    function setWidth(){ 
     setTimeout(function(){ 
      var carWidth = $('.owl-stage').width() + 100; 
      $('.owl-stage').width(carWidth); 
     },200); 

    } 

tôi chắc chắn rằng nó có thể làm việc mà không setTimeout, nhưng thời hạn không thể chờ đợi (* cảm thấy xấu cho nó).

Hy vọng điều đó sẽ hữu ích!

Answer 2

Thêm chỉ hiển thị flex trong CSS cho lớp .owl-stage và cũng thêm chức năng jS cho các thiết bị nhỏ hơn.

CSS

.owl-stage{display:flex} 

JS

$('.owl-carousel').owlCarousel({ 
    loop: false, 
    autoWidth:true, 
    margin:10, 
    nav:true, 
    responsive:{ 
    0:{ 
    items:1, 
    autoWidth:false 
    }, 
    768:{ 
    items:3 
    } 
    } 
});