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.

Answer 1

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

Answer 2

.item{
    margin: 5px;
} 
.owl-item:nth-child(3n+1) > .item {
    margin-left: 0;
}
.owl-item:nth-child(3n+3) > .item {
    margin-right: 0;
}

Config OwlCarousel:

$("#owl-highlight").owlCarousel({
            autoPlay: 3000,
            items : 3,
            scrollPerPage: true,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });

Answer 3

create a class for margin/padding and use it as per your requirement.

.margin_10 { margin:10px }

</style>




<div id="carousel2"
<div class="carousel-inner">

<div class="item margin_10">

<!--your pic + content will go here as per requirement-->


 </div> 

</div>
</div>

Answer 4

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 5

You can use pure CSS using box-shadow as follow:

.item::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -webkit-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
  -moz-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
  box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
}

Answer 6

Just use margin like this in your function:

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