Comment ajouter de la marge entre owl carousel
Je veux ajouter margin-left
ou margin-right
entre carrousel éléments.mais pas de marge à gauche pour le premier élément. ci-dessous mon code.comment puis-je postuler à cette.
$("#carousel").owlCarousel({
items : 4,
itemsCustom : false,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,2],
itemsTablet: [768,1],
itemsTabletSmall: false,
itemsMobile : [479,1],
singleItem : false,
itemsScaleUp : false,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Autoplay
autoPlay : true,
stopOnHover : false,
//Auto height
autoHeight : true,
});
ajouter à la marge de gauche marge droite en CSS
Merci!, mais si j'ai ajouter dans le css il y a un problème avec le conteneur principal.premier et dernier éléments s'harmonisent pas avec les conteneur.
Merci!, mais si j'ai ajouter dans le css il y a un problème avec le conteneur principal.premier et dernier éléments s'harmonisent pas avec les conteneur.
OriginalL'auteur Dishan TD | 2014-12-14
Vous devez vous connecter pour publier un commentaire.
Salut Vous pouvez utiliser ces étapes
Ou vous pouvez suivre ce tutoriel :http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html
OriginalL'auteur Soufiane Douimia
Au lieu d'appliquer le CSS en JavaScript, appliquez une bonne feuille de style. Puis il devient simple:
OriginalL'auteur Michael Aaron Safyan
CSS solution:
Ce que Michael Aaron Safyan dit, c'est effectivement pas la "meilleure" façon de le faire.
La bonne façon de le faire serait:
Si vous le faites dans l'autre sens, vous êtes en négligeant l'ensemble de la "Cascade" partie de CSS.
Sidenotes
Owl Carousel 1:
Assurez-vous de ne pas définir d'redondant options pour votre Owl Carousel.
Si vous regardez les options disponibles, vous verrez que beaucoup d'entre eux sont des booléens que le défaut de
false
. Par exemple, toutes les options suivantes sont les paramètres par défaut.Si vous supprimez tous les de ces, votre code sera le suivant joli petit extrait:
Owl Carousel 2
Et juste pour répondre à votre question, encore mieux, si vous décidez d'utiliser Owl Carousel 2:
Owl Carousel 2 dispose d'une option pour définir un pixel situé à droite de la marge de votre curseur éléments à l'aide des options (Owl Carousel 2: Options). En utilisant cela, vous pouvez garder votre CSS à un minimum.
OriginalL'auteur Brannie19
Les réponses a causé quelques problèmes pour moi où la marge supplémentaire sur le
.owl-item
causé Owl Carousel (v1.3) pour modifier l'alignement des éléments—après d'aller à la diapositive suivante, un peu de ruban de la première diapositive était encore visible.Une meilleure approche serait d'ajouter la marge de l'élément à l'intérieur de de la
.owl-item
, comme suit:Assurez-vous de remplacer
.my-div
ci-dessus avec un sélecteur pour tout ce que vous avez à l'intérieur de la.owl-item
.Comme mentionné par @Brannie19, si vous êtes en utilisant Owl Carousel 2, vous pouvez simplement utiliser le
margin
option.OriginalL'auteur stephen.hanson
Ce code fonctionne pour moi
OriginalL'auteur flaviobarcaccia
Salut vous pouvez également changer de rembourrage pour un seul carrousel:
CSS:
et ajouter cette classe pour tous le carrousel des éléments:
JQuery:
De cette manière, il n'y a pas de décalage avec la frontière du manège.
OriginalL'auteur Tktorza