Center OwlCarousel quando meno di X articoli

Question

Utilizziamo OwlCarousel 1.3.3 sul nostro sito responsive. Abbiamo stabilito il numero massimo di elementi da 4.

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

Finché il carosello contiene 4 o più immagini tutto funziona bene. Ma quando un editor aggiunge solo 3 o meno elementi, vogliamo che quegli elementi siano centrati sulla pagina. Al momento sono "allineati a sinistra" e non sembrano molto buoni.

L'opzione itemsScaleUp non è quello che sto cercando. Se gli elementi sono impostati su 4 ma il carosello contiene solo 1 oggetto, quell'elemento diventerebbe troppo grande.

ho trovato questi problemi su github:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
Ma nulla trovo utile.

È possibile visualizzare il problema in questo codepen.

Aggiornamento:
Guardando attraverso la fonte di OwlCarousel vedrai che gli elementi .owl-wrapper larghezza viene moltiplicato con 2. Ma non riesco a capire perché, e se è possibile rimuovere il moltiplicatore.

Ho aperto questo github issue per cercare di ottenere qualche chiarimento.

Answer 1

OwlCarousel ha un moltiplicatore 2x sulla larghezza degli elementi .owl-wrapper. Questo moltiplicatore rende incredibilmente difficile centrare la giostra quando è meno che piena.

Tuttavia, questo moltiplicatore non sembra avere alcuna ragione per essere lì. Nulla sembra rompersi quando lo rimuovo. Ecco, questo è quello che ho fatto, le owl.carousel.js aggiornati possono essere trovate qui: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier

E ho aggiunte questo CSS (che non è incluso nel repository):

.owl-wrapper { 
    margin: 0 auto; 
} 

Answer 2

Modifica questo:

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

e questo

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

Answer 3

Invece di cambiare sorgente è possibile utilizzare il metodo afterInit e ufterUpdate S. Qualcosa di simile a questo:

 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

Nella nuova versione di Owl Carosello 2, è necessario aggiungere questo css:

.owl-stage{ 
    margin: 0 auto; 
} 

di questo lavoro per me nella versione 2.

saluti!

Answer 5

Soluzione per 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); 
});