Centre OwlCarousel lorsque moins de X articles
Nous utilisons OwlCarousel 1.3.3 sur notre site responsive. Nous avons fixé le nombre maximum de points à 4.
$container.owlCarousel({
items: 4,
itemsDesktop: [1000, 4],
itemsDesktopSmall: [900, 3],
itemsTablet: [600, 2],
itemsMobile: [480, 1]
});
Tant que le carrousel contient 4 ou plus d'images tout fonctionne bien. Mais quand un éditeur ajoute seulement 3 ou moins de points que nous voulons ces éléments de façon à être centré sur la page. Juste maintenant, ils sont "aligné à gauche" et il n'a pas l'air très bon.
L'option itemsScaleUp
n'est pas ce que je cherche. Si des articles est fixé à 4, mais le carrousel contient seulement 1 point cet élément serait un trop gros.
J'ai trouvé ces problèmes sur github:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
Mais de rien je trouve utile.
Vous pouvez voir le problème dans ce codepen.
Mise à jour:
À la recherche par le biais de la source de OwlCarousel vous verrez que le .owl-wrapper
éléments de largeur obtient multipliée par 2. Mais je ne peux pas comprendre pourquoi, et si il est sûr de supprimer le multiplicateur.
J'ai ouvert ce github problème pour essayer d'obtenir quelques éclaircissements.
J'ai ajouté un codepen
OriginalL'auteur pstenstrm | 2015-06-23
Vous devez vous connecter pour publier un commentaire.
Dans la nouvelle version de Owl Carousel 2, vous devez ajouter ce css:
ce travail est pour moi la version 2.
Ce qui concerne les!
a travaillé pour moi. merci
OriginalL'auteur Radames E. Hernandez
OwlCarousel a un multiplicateur de x2 sur le
.owl-wrapper
éléments de largeur. Ce multiplicateur rend incroyablement dur au centre du carrousel quand il est moins complet.Cependant, ce multiplicateur ne semble pas avoir de raison d'être là. Rien ne semble pouvoir briser lorsque je le supprime. Donc, c'est ce que j'ai fait la mise à jour owl.carousel.js peut être trouvé ici: https://github.com/Vinnovera/OwlCarousel/tree/remove-width-multiplier
Et j'ai ajouté ce CSS (ce qui n'est pas inclus dans le repo):
OriginalL'auteur pstenstrm
Au lieu de changer de source, vous pouvez utiliser afterInit et ufterUpdate méthodes. Quelque chose comme ceci:
Fonctionne avec la version 1.3.3
OriginalL'auteur Vlad Los
Changer cela:
Et ce
OriginalL'auteur Tóth Balázs
Solution pour Owlcarousel2
OriginalL'auteur Vlad Alivanov
C'est aussi une solution qui a fonctionné pour moi à l'aide de flexbox.
OriginalL'auteur Marcus Christiansen