how add spaces between owl carousel item

Question

How can i add space between owl item. add margin or padding between items. this is need to be responsive.can i add some gutter in to the 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

Just use margin like this in your function:

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

Answer 2

I found the solution. But I had to change source code. I added new option "padding" into $.fn.owlCarousel.options{}. Then I changed formula in 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());
},

And last thing, I added this padding (padding-right) for items:

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

So now I can just initialize carousel with option "padding" like this:

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

And get this result:

Answer 3

Based on this demo I would say, just increase the margin in the .item class in custom.css.

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

Be careful with modifying CSS for responsive sites and plugins. If this needed to be adjusted for different resolutions, you could add to your custom.css some media queries and extend the styles accordingly