如何在猫头鹰走马灯项目之间添加空格

Question

我如何在猫头鹰项目之间添加空间？ 在项目之间添加外边距或内边距。 这需要是响应式的，我可以在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,
    });
}

- Dishan TD

---

我认为你可以尝试使用CSS来设置元素的margin属性。 - user4375224

Answer 1

只需在您的函数中像这样使用margin：

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

- Den Pat

---

这是针对owlCarousel v2的。 - Alireza

这是正确的答案，渲染轮播到 DOM 后修改 CSS 通常会导致它有点不稳定。使用 owlCarousel API 可以使其正确地呈现。 - Lewis Menelaws

这不是V1的解决方案，我相信OP正在使用。 - Halden Collier

@HaldenCollier 现在已经没有人使用v1了，当我写这篇文章的时候，许多人已经开始使用新版本了，而且现在是2021年，但是是的，这个不适用于v1。 - Den Pat

@DenPat 我有时会维护旧项目，其中许多项目都在使用v1。因此，我认为说“没有人”在使用它并不公平，特别是当问题涉及v1时。 - Halden Collier

Answer 2

我找到了解决方案。但是我必须更改源代码。 我向$.fn.owlCarousel.options{}中添加了新选项“padding”。然后我在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());
},

最后，我为项目添加了这个填充（填充右侧）：

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

所以现在我只需使用“padding”选项初始化 carousel，就像这样：

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

并获得以下结果：

- Дмитрий Уланов

---

非常感谢您提供真诚的解决方案，您拯救了我的一天，伙计。非常感谢 :) - vivekkupadhyay

Answer 3

根据这个演示，我会说，在custom.css文件中，只需增加.item类的边距即可。

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

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

- svnm

---

唯一的问题是：这会在项目之间添加空格，但也会在最左边和最右边的项目左右两侧添加空格。这在v2中已经解决了，但在v1中我仍在努力解决它。 - allanberry

也许可以通过在父包装器上使用负边距来解决这个问题。 - JamesWilson

Answer 4

也许你正在使用的是OWL Carousel 1版本，我建议你使用2版本。您可以在这里找到它。转到文档菜单，您会找到一切。

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

- Sourov Roy Chowdhury

Answer 5

你必须知道，目前没有直接在猫头鹰走马灯中添加边距的方法，也许他们将来会进行更新，因此解决方案是使用CSS属性创建空间。

你可以在CSS中添加填充（padding）和边距（margin），计算所需的具体间距并将其应用于填充和边距是最佳方法。

我希望这能帮助你找到解决问题的方法。

您可以按照猫头鹰走马灯插件官方网站发布的教程中的步骤进行操作：http://www.istedod.uz/lib/owl-carousel/demos/custom.html。

- Soufiane Douimia

Answer 6

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

配置 OwlCarousel：

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

- Thành Nguyễn

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

- Liviu Costache

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

- Firoz Khan