Trung tâm OwlCarousel khi ít hơn X mặt hàng

Question

Chúng tôi đang sử dụng OwlCarousel 1.3.3 trên trang web đáp ứng của chúng tôi. Chúng tôi đã đặt số mục tối đa thành 4.

$container.owlCarousel({ 
    items: 4, 
    itemsDesktop: [1000, 4], 
    itemsDesktopSmall: [900, 3], 
    itemsTablet: [600, 2], 
    itemsMobile: [480, 1] 
}); 

Miễn là băng chuyền chứa 4 hoặc nhiều hình ảnh hoạt động tốt. Nhưng khi một trình soạn thảo chỉ thêm 3 mục hoặc ít hơn, chúng tôi muốn các mục đó được căn giữa trên trang. Ngay bây giờ họ đang "trái liên kết" và nó không nhìn rất tốt.

Tùy chọn itemsScaleUp không phải là những gì tôi đang tìm kiếm. Nếu các mục được đặt thành 4 nhưng băng chuyền chỉ chứa 1 mục, mục đó sẽ quá lớn.

tôi đã tìm thấy những vấn đề trên github:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
Nhưng không có gì tôi thấy hữu ích.

Bạn có thể thấy sự cố trong số codepen này.

Cập nhật:
Nhìn qua các nguồn OwlCarousel bạn sẽ thấy rằng .owl-wrapper yếu tố chiều rộng được nhân với 2. Nhưng tôi không thể tìm ra lý do tại sao, và nếu nó là an toàn để loại bỏ các nhân.

Tôi đã mở github issue này để tìm cách làm rõ.

Answer 1

OwlCarousel có hệ số 2x trên chiều rộng phần tử .owl-wrapper. Hệ số này làm cho nó vô cùng khó khăn để trung tâm băng chuyền khi nó ít hơn đầy đủ.

Tuy nhiên, hệ số này dường như không có lý do gì để ở đó. Không có gì có vẻ vỡ khi tôi tháo nó ra. Vì vậy, đó là những gì tôi đã làm, những owl.carousel.js cập nhật có thể được tìm thấy ở đây: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

Và tôi đã thêm CSS này (mà không được bao gồm trong repo):

.owl-wrapper { 
    margin: 0 auto; 
} 

Answer 2

Thay đổi này:

.owl-carousel .owl-item { 
    position: relative; 
    min-height: 1px; 
    display:inline-block; 
    -webkit-backface-visibility: hidden; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-touch-callout: none; } 

và đây

.owl-carousel { 
    display: none; 
    width: 100%; 
    text-align:center; 
} 

Answer 3

Thay vì thay đổi nguồn mà bạn có thể sử dụng afterInit và ufterUpdate phương pháp S. Một cái gì đó như thế này:

 var owl = $('#carousel'); 
     owl.owlCarousel({ 
         items 6, 
         afterInit: function() { 
          owl.find('.owl-wrapper').each(function() { 
           var w = $(this).width()/2; 
           $(this).width(w); 
           $(this).css('margin', '0 auto'); 
          }); 
         }, 
         afterUpdate: function() { 
          owl.find('.owl-wrapper').each(function() { 
           var w = $(this).width()/2; 
           $(this).width(w); 
           $(this).css('margin', '0 auto'); 
          }); 
         } 
        }); 

Answer 4

Trong phiên bản mới của Owl Carousel 2, bạn cần thêm css này:

.owl-stage{ 
    margin: 0 auto; 
} 

của tác phẩm này với tôi trong phiên bản 2.

Trân trọng!

Answer 5

Giải pháp cho Owlcarousel2

var owl = $('.owl-carousel'); 
owl.owlCarousel(); 
$(window).on('resize load', function() { 
    var outerStage = owl.find('.owl-stage-outer'); 
    var outerWidth = Number(outerStage.css('width').replace('px', '')); 
    var width = Number(owl.find('.owl-stage').css('width').replace('px', '')); 
    if (width < outerWidth) 
     outerStage.css('left', Math.ceil(outerWidth - width)/2 + 'px'); 
    else 
     outerStage.css('left',0); 
});