Center OwlCarousel, gdy mniej niż X przedmiotów

Question

Używamy OwlCarousel 1.3.3 na naszej responsywnej stronie. Ustawiliśmy maksymalną liczbę pozycji na 4.

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

Dopóki karuzela zawiera 4 lub więcej zdjęć, wszystko działa poprawnie. Ale kiedy edytor dodaje tylko 3 lub mniej elementów, chcemy, aby te elementy były wycentrowane na stronie. Teraz są "wyrównane do lewej" i nie wyglądają zbyt dobrze.

Opcja itemsScaleUp nie jest tym, czego szukam. Jeśli pozycja jest ustawiona na 4, ale karuzela zawiera tylko 1 pozycję, przedmiot ten byłby zbyt duży.

Znalazłem te kwestie na github:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
Ale nic nie mogę znaleźć pomocne.

Możesz zobaczyć problem w tym codepen.

Aktualizacja:
Patrząc przez źródło OwlCarousel zobaczysz że .owl-wrapper elementy szerokość zostaje pomnożone przez 2. Ale nie mogę zrozumieć, dlaczego, i czy jest to bezpieczne, aby usunąć mnożnik.

Otworzyłem ten github issue, aby uzyskać pewne wyjaśnienia.

Answer 1

OwlCarousel ma 2x mnożnik na szerokości elementów .owl-wrapper. Ten mnożnik sprawia, że ​​niezwykle trudno jest wyśrodkować karuzelę, gdy jest ona mniejsza niż pełna.

Jednak ten mnożnik nie ma żadnego powodu, aby tam być. Nic nie wydaje się łamać, kiedy go usuwam. Więc to, co zrobiłem, zaktualizowane owl.carousel.js można znaleźć tutaj: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

I dodałem ten CSS (który nie jest zawarty w repo):

.owl-wrapper { 
    margin: 0 auto; 
} 

Answer 2

to zmienić:

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

i to

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

Answer 3

Zamiast zmieniać źródło można użyć metody afterInit i ufterUpdate s. Coś takiego:

 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

W nowej wersji Sowa Karuzela 2, trzeba dodać to CSS:

.owl-stage{ 
    margin: 0 auto; 
} 

ta praca jest dla mnie w wersji 2.

Pozdrawiam!

Answer 5

rozwiązanie dla 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); 
});