jQuery 如何在猫头鹰轮播之间添加边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27467142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add margin between owl carousel
提问by Dishan TD
I want to add margin-leftor margin-rightbetween carousel items.but not margin-left for first item. below is my code.how can i apply to this.
我想添加margin-left或margin-right在轮播项目之间。但不是第一个项目的左边距。下面是我的代码。我该如何申请。
$("#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,
});
回答by Soufiane Douimia
Hi You can use this steps
嗨，您可以使用此步骤
$('.owl-carousel').owlCarousel({
stagePadding: 50,
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
Or you can follow this tutorial :http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html
或者您可以按照本教程进行操作：http: //www.owlcarousel.owlgraphic.com/demos/stagepadding.html
回答by Michael Aaron Safyan
Instead of applying the CSS in JavaScript, apply it in a proper stylesheet. Then it becomes simple:
不要在 JavaScript 中应用 CSS，而是将其应用到适当的样式表中。然后就变得简单了：
.carousel-item {
margin-left: 10px;
}
.carousel-item:first-child {
margin-left: 0;
}
回答by Brannie19
CSS solution:
CSS 解决方案：
What Michael Aaron Safyan said is actually not the "best" way to do it. The proper way to do it would be:
Michael Aaron Safyan 所说的实际上并不是做到这一点的“最佳”方式。正确的做法是：
.carousel-item + .carousel-item {
margin-left: 10px;
}
If you do it the other way, you're disregarding the whole "Cascading" portion of CSS.
如果你用另一种方式来做，你就忽略了 CSS 的整个“级联”部分。
Sidenotes
旁注
Owl Carousel 1:
猫头鹰旋转木马 1：
Make sure you don't set any redundant options for your Owl Carousel.
If you look at the available options, you'll see that many of them are booleans that default to false. For instance, all of the following options are default settings.
确保您没有为 Owl Carousel 设置任何多余的选项。如果您查看可用选项，您会发现其中许多是默认为false. 例如，以下所有选项都是默认设置。
itemsCustom: false
itemsTabletSmall: false
singleItem: false
itemsScaleUp: false
slideSpeed: 200
paginationSpeed: 800
rewindSpeed: 1000
stopOnHover: false
If you remove all of these, your code will be the following neat little snippet:
如果您删除所有这些，您的代码将是以下简洁的小片段：
$("#carousel").owlCarousel({
items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,2],
itemsTablet: [768,1],
itemsMobile : [479,1],
//Autoplay
autoPlay : true,
//Auto height
autoHeight : true
});
Owl Carousel 2
猫头鹰旋转木马 2
And just to answer your question even better, if you'd decide to use Owl Carousel 2:
为了更好地回答您的问题，如果您决定使用Owl Carousel 2：
Owl Carousel 2 has an option to set a right pixel margin to your slider items by using options (Owl Carousel 2: Options). By using this you can keep your CSS to a minimum.
Owl Carousel 2 有一个选项，可以使用选项（Owl Carousel 2: Options）为您的滑块项目设置正确的像素边距。通过使用它，您可以将 CSS 保持在最低限度。
margin
Type: Number
Default: 0margin-right(px) on item.
利润
类型：数字
默认值：0项目上的边距右（px）。
回答by stephen.hanson
The answers given caused some issues for me where the extra margin on the .owl-itemcaused Owl Carousel (v1.3) to misalign the items—after going to the next slide, a little sliver of the first slide was still visible.
给出的答案给我带来了一些问题，.owl-item导致 Owl Carousel (v1.3)上的额外边距使项目未对齐 - 在转到下一张幻灯片后，第一张幻灯片的一小部分仍然可见。
A better approach would be to add the margin to the item insideof the .owl-item, like so:
更好的方法是将保证金添加到该项目中的.owl-item，就像这样：
.owl-item + .owl-item .my-div {
margin-left: 1em
}
Make sure to replace .my-divabove with a selector for whatever you have inside the .owl-item.
确保.my-div用选择器替换上面的.owl-item.
As mentioned by @Brannie19, if you're using Owl Carousel 2, you can just use the marginoption.
正如@Brannie19 所提到的，如果您使用的是 Owl Carousel 2，则可以使用该margin选项。
回答by flaviobarcaccia
This code works for me
这段代码对我有用
.owl-carousel .owl-item img{
padding: 10px;
}
回答by Tktorza
Hi you can also change padding only for one carousel:
CSS:
嗨，您也可以仅更改一个轮播的填充：
CSS：
.padding-item{
padding-right: 15px;
}
and add this class for all the carousel items:
JQuery:
并为所有轮播项目添加此类：
JQuery：
$('#owl-carousel-identifier').find('.owl-item').each(function(i){
this.className+=' padding-item';
});
By this way, there aren't shift with the border of carousel.
通过这种方式，与轮播的边界没有变化。
