如何在猫头鹰轮播之间添加边距答案

【问题标题】：How to add margin between owl carousel如何在猫头鹰轮播之间添加边距
【发布时间】：2014-12-14 07:07:24
【问题描述】：

我想在轮播项目之间添加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,
    });

【问题讨论】：

在 CSS 中添加 margin-left 或 margin-right
@Cattla 谢谢！，但是如果我添加 css，主容器会出现一些问题。第一个和最后一个项目与容器不对齐。

标签： jquery css owl-carousel

【解决方案1】：

您好，您可以使用此步骤

    $('.owl-carousel').owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

或者您可以按照本教程进行操作：http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

【讨论】：

【解决方案2】：

不要在 JavaScript 中应用 CSS，而是在适当的样式表中应用它。然后就变得简单了：

.carousel-item {
  margin-left: 10px;
}
.carousel-item:first-child {
  margin-left: 0;
}

【讨论】：

谢谢！。主容器有问题。

【解决方案3】：

CSS 解决方案：

Michael Aaron Safyan 所说的实际上并不是“最好”的方式。正确的做法是：

.carousel-item + .carousel-item {
   margin-left: 10px;
}

如果你用另一种方式做，你就是在忽略 CSS 的整个“级联”部分。

旁注

猫头鹰旋转木马 1：

确保您没有为 Owl Carousel 设置任何多余的选项。如果您查看可用选项，您会发现其中许多是默认为false 的布尔值。例如，以下所有选项都是默认设置。

itemsCustom: false
itemsTabletSmall: false
singleItem: false
itemsScaleUp: false
slideSpeed: 200
paginationSpeed: 800
rewindSpeed: 1000
stopOnHover: false

如果你删除所有这些，你的代码将是以下整洁的小sn-p：

$("#carousel").owlCarousel({
    items : 4,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,1],
    itemsMobile : [479,1],

    //Autoplay
    autoPlay : true,

     //Auto height
    autoHeight : true
});

猫头鹰旋转木马 2

如果您决定使用 Owl Carousel 2，为了更好地回答您的问题：

Owl Carousel 2 有一个选项可以使用选项 (Owl Carousel 2: Options) 为滑块项设置正确的像素边距。通过使用它，您可以将 CSS 保持在最低限度。

边距

类型：数字
默认值：0

margin-right(px) 在项目上。

【讨论】：

【解决方案4】：

给出的答案给我带来了一些问题，.owl-item 上的额外边距导致 Owl Carousel (v1.3) 未对齐项目 - 在转到下一张幻灯片后，第一张幻灯片的一小部分仍然可见.

更好的方法是将边距添加到.owl-item 的inside 项，如下所示：

.owl-item + .owl-item .my-div {
  margin-left: 1em
}

确保将上面的 .my-div 替换为 .owl-item 中的任何内容的选择器。

正如@Brannie19 所提到的，如果您使用的是 Owl Carousel 2，则可以使用 margin 选项。

【讨论】：

【解决方案5】：

此代码适用于我

.owl-carousel .owl-item img{
  padding: 10px;
}

【讨论】：

您能否稍微解释一下它为什么/如何工作？

【解决方案6】：

您好，您还可以仅更改一个轮播的填充：
CSS：

.padding-item{
    padding-right: 15px;
}

并为所有轮播项目添加此类：
jQuery：

    $('#owl-carousel-identifier').find('.owl-item').each(function(i){
            this.className+=' padding-item';
        });

这样一来，轮播的边框就没有移位了。

【讨论】：