Javascript 如何在猫头鹰轮播项目之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27467571/
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 add spaces between owl carousel item
提问by Dishan TD
How can i add space between owl item. add margin or padding between items. this is need to be responsive.can i add some gutter in to the jquery.
如何在猫头鹰项目之间添加空格。在项目之间添加边距或填充。这需要响应。我可以在 jquery 中添加一些装订线吗？
function newsCarousel(){
$("#carousel").owlCarousel({
items : 4,
itemsCustom : false,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,2],
itemsTablet: [768,1],
itemsTabletSmall: false,
itemsMobile : [479,1],
singleItem : false,
itemsScaleUp : false,
mouseDrag : true,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Autoplay
autoPlay : true,
stopOnHover : false,
//Auto height
autoHeight : true,
});
}
回答by Den Pat
Just use marginlike this:
只需margin像这样使用：
function newsCarousel(){
$("#carousel").owlCarousel({
items : 4,
margin: 20,
autoHeight : true,
});
}
回答by Дмитрий Уланов
I found the solution. But I had to change source code.
I added new option "padding" into $.fn.owlCarousel.options{}. Then I changed formula in calculateWidth : function () {}
我找到了解决方案。但我不得不更改源代码。我在$.fn.owlCarousel.options{}. 然后我改变了公式calculateWidth : function () {}
calculateWidth : function () {
var base = this;
base.itemWidth = Math.round( (base.$elem.width() + base.options.padding) / base.options.items);
console.log(base.$owlItems.width());
},
And last thing, I added this padding (padding-right) for items:
最后一件事，我为项目添加了这个填充（填充右）：
appendItemsSizes : function () {
var base = this,
roundPages = 0,
lastItem = base.itemsAmount - base.options.items;
base.$owlItems.each(function (index) {
var $this = $(this);
$this
.css({
"width": base.itemWidth,
"padding-right": base.options.padding
})
.data("owl-item", Number(index));
if (index % base.options.items === 0 || index === lastItem) {
if (!(index > lastItem)) {
roundPages += 1;
}
}
$this.data("owl-roundPages", roundPages);
});
},
So now I can just initialize carousel with option "padding" like this:
所以现在我可以像这样使用“填充”选项初始化轮播：
$(".carousel").owlCarousel({
items : 3,
padding : 23
});
And get this result:
并得到这个结果：
回答by svnm
Based on this demoI would say, just increase the margin in the .item class in custom.css.
基于这个演示，我会说，只需增加custom.css 中.item 类的边距。
#owl-example .item{
...
margin-left: 20px;
margin-right: 20px;
}
Be careful with modifying CSS for responsive sites and plugins. If this needed to be adjusted for different resolutions, you could add to your custom.csssome media queries and extend the styles accordingly
修改响应式网站和插件的 CSS 时要小心。如果需要针对不同的分辨率进行调整，您可以在custom.css 中添加一些媒体查询并相应地扩展样式
回答by Sourov Roy Chowdhury
回答by Soufiane Douimia
You must know that at this time there isn't any way to add a margin directly in the owl carousel may they can make an apdate in the future, so the solution is to make the spaces with Css properties
你要知道，这个时候没有办法直接在owl carousel里面加一个margin，以后可能会做一个更新，所以解决办法是把空格做成Css属性
you can add the paddingin css and also the marginand the best way to get the specific space you can use the mathematic to calcul the space that you need and applied it to the padding and the margin
您可以添加paddingin css 以及margin获取特定空间的最佳方法，您可以使用数学计算所需的空间并将其应用于填充和边距
I hope that this will help you to find the solution of your problem
我希望这将帮助您找到问题的解决方案
you can follow this steps in this Tuto published by the official site of owl carousel plugin : http://www.istedod.uz/lib/owl-carousel/demos/custom.html
您可以在 owl carousel 插件官方网站发布的教程中按照以下步骤操作：http: //www.istedod.uz/lib/owl-carousel/demos/custom.html
回答by Thành Nguy?n
.item{
margin: 5px;
}
.owl-item:nth-child(3n+1) > .item {
margin-left: 0;
}
.owl-item:nth-child(3n+3) > .item {
margin-right: 0;
}
Config OwlCarousel:
配置 OwlCarousel：
$("#owl-highlight").owlCarousel({
autoPlay: 3000,
items : 3,
scrollPerPage: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
回答by Liviu Costache
You can use pure CSS using box-shadow as follow:
您可以使用 box-shadow 使用纯 CSS，如下所示：
.item::after{
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
-webkit-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
}
回答by Firoz Khan
create a class for margin/padding and use it as per your requirement.
创建一个用于边距/填充的类并根据您的要求使用它。
.margin_10 { margin:10px }
</style>
<div id="carousel2"
<div class="carousel-inner">
<div class="item margin_10">
<!--your pic + content will go here as per requirement-->
</div>
</div>
</div>
