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

Question

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

Answer 1

就像这样使用margin:

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

Answer 2

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

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

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