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

Solution 1

Just use margin like this in your function:

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

Solution 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:

Solution 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

Solution 4

You must know that at this time there isn't any way to add a margin directly in the owl carousel may they can make an apdate in the future, so the solution is to make the spaces with Css properties

you can add the padding in css and also the margin and the best way to get the specific space you can use the mathematic to calcul the space that you need and applied it to the padding and the margin

I hope that this will help you to find the solution of your problem

you can follow this steps in this Tuto published by the official site of owl carousel plugin : http://www.istedod.uz/lib/owl-carousel/demos/custom.html

Solution 5

Maybe you are using OWL Carousel version 1, I suggest you use version 2.

You will get it here.

Go to Docs menu you will find everything.

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

View more solutions

Comments

[aljabear]

only trouble: this adds space between the items, but also to the left and right of the leftmost and rightmost items. This is solved in v2, but in v1 I'm still trying to figure it out.

[JamesWilson]

Maybe account for that with a negative margin on the parent wrapper?

[Alireza]

This is for owlCarousel v2

[Lewis Menelaws]

This is the correct answer, modifying the CSS after the carousel gets rendered to the DOM usually causes it to be a bit wonky. Using the owlCarousel api allows it to render it properly.

[vivekkupadhyay]

Thanks a ton for the genuine solution, you saved my day mate. Many Thanks :)

[Halden Collier]

This is not a solution for V1, which I believe OP is using

[Den Pat]

@HaldenCollier Nobody use v1 now a days, at the time I wrote this, many people already start using new version and it's 2021 bro, but yes, this won't be working for v1

[Halden Collier]

@DenPat I sometimes maintain older projects, many of which are using v1. So I don't think it's really fair to say that 'nobody' is using it, especially when the question is about v1.