如何在猫头鹰轮播项目之间添加空格答案

【问题标题】：how add spaces between owl carousel item如何在猫头鹰轮播项目之间添加空格
【发布时间】：2014-12-14 08:22:49
【问题描述】：

如何在 owl item 之间添加空格。在项目之间添加边距或填充。这需要响应。我可以在 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,
    });
}

【问题讨论】：

我认为你可以尝试使用 css 作为元素并设置 margin 属性

标签： javascript jquery css html owl-carousel

【解决方案1】：

在你的函数中像这样使用margin：

    $("#carousel").owlCarousel({
        items : 4,
        margin: 20,
        autoHeight : true,
    });

【讨论】：

这是 owlCarousel v2
这是正确的答案，在轮播渲染到 DOM 之后修改 CSS 通常会导致它有点不稳定。使用 owlCarousel api 可以正确渲染它。
这不是 V1 的解决方案，我相信 OP 正在使用它
@HaldenCollier 现在没有人使用 v1，在我写这篇文章的时候，很多人已经开始使用新版本，而且是 2021 年的兄弟，但是是的，这不适用于 v1
@DenPat 我有时会维护较旧的项目，其中许多都使用 v1。所以我认为说“没有人”在使用它是不公平的，尤其是当问题是关于 v1 时。

【解决方案2】：

我找到了解决方案。但我不得不更改源代码。我在$.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());
},

最后，我为项目添加了这个填充（padding-right）：

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);
        });
    },

所以现在我可以像这样使用“填充”选项初始化轮播：

$(".carousel").owlCarousel({
    items : 3,
    padding : 23
});

得到这个结果：

【讨论】：

非常感谢真正的解决方案，你救了我的朋友。非常感谢:)

【解决方案3】：

基于此demo 我想说，只需增加 custom.css 中 .item 类的边距即可。

#owl-example .item{
    ...
    margin-left: 20px;
    margin-right: 20px;
}

为响应式网站和插件修改 CSS 时要小心。如果这需要针对不同的分辨率进行调整，您可以在 custom.css 中添加一些媒体查询并相应地扩展样式

【讨论】：

唯一的麻烦：这增加了项目之间的空间，而且在最左边和最右边的项目的左边和右边。这在 v2 中已解决，但在 v1 中我仍在尝试解决。
可能是因为父包装器上的边距为负数？

【解决方案4】：

你要知道，目前还没有办法直接在owl carousel中添加margin，以后可能会做apdate，所以解决办法是用css属性制作空格

您可以在 css 中添加 padding 和 margin 以及获得特定空间的最佳方法，您可以使用数学计算所需空间并将其应用于填充和边距

我希望这将帮助您找到问题的解决方案

您可以按照猫头鹰轮播插件官网发布的这个教程中的步骤操作：http://www.istedod.uz/lib/owl-carousel/demos/custom.html

【讨论】：

【解决方案5】：

也许你使用的是OWL Carousel 版本1，我建议你使用版本2。

你会得到它here。

转到文档菜单，您将找到所有内容。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
})

【讨论】：

【解决方案6】：

.item{
    margin: 5px;
} 
.owl-item:nth-child(3n+1) > .item {
    margin-left: 0;
}
.owl-item:nth-child(3n+3) > .item {
    margin-right: 0;
}

配置猫头鹰轮播：

$("#owl-highlight").owlCarousel({
            autoPlay: 3000,
            items : 3,
            scrollPerPage: true,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });

【讨论】：

【解决方案7】：

您可以使用 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);
}

【讨论】：

【解决方案8】：

为边距/填充创建一个类并根据您的要求使用它。

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

【讨论】：