Question

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

Answer 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

Answer 2

不是在JavaScript中应用CSS，而是将其应用于适当的样式表。然后变得简单：

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

Answer 3

CSS解决方案：

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

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

如果你以另一种方式这样做，你就会忽视CSS的整个“层叠”部分。

<强> 图片的标题说明

猫头鹰旋转木马1：

确保您没有为猫头鹰转盘设置任何冗余选项。如果查看可用选项，您会看到其中许多是默认为false的布尔值。例如，以下所有选项都是默认设置。

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

如果你删除所有这些，你的代码将是以下整齐的小片段：

$("#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

如果你决定使用 Owl Carousel 2 ，那就更好地回答你的问题：

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

<强>余量

类型：数字
  默认值：0
     项目的
margin-right（px）。

Answer 4

给出的答案给我带来了一些问题，.owl-item导致猫头鹰旋转木马（v1.3）的额外余量导致物品错位 - 在进入下一张幻灯片之后，第一张幻灯片的一小部分是仍然可见。

更好的方法是将余量添加到.owl-item的内的项中，如下所示：

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

请务必使用选择器替换上面的.my-div .owl-item内的任何内容。

正如@ Brannie19所提到的，如果你正在使用猫头鹰旋转木马2，你可以使用margin选项。

Answer 5

此代码适用于我

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

Answer 6

您好，您也可以只为一个轮播更改填充：
CSS：

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

并为所有轮播项添加此类：
JQuery的：

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

通过这种方式，旋转木马的边界没有移位。

如何在猫头鹰旋转木马之间添加边距

6 个答案: