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.

enter image description here

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

i think you can try to use css for the element and set margin property — , Dec 14 '14 at 08:26

Den Pat · Answer 1 · 2020-09-01T05:17:12.460

16

Just use margin like this in your function:

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

edited Sep 01 '20 at 05:17

answered Dec 14 '14 at 15:40

Den Pat

1,118
10
17

2

This is for owlCarousel v2 – Alireza Oct 22 '15 at 05:53
1

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. – Lewis Menelaws Dec 07 '17 at 15:30
This is not a solution for V1, which I believe OP is using – Halden Collier Jan 26 '21 at 16:10
@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 – Den Pat Jan 29 '21 at 05:00
1

@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. – Halden Collier Feb 02 '21 at 11:34

score 3 · Answer 2 · edited Aug 08 '16 at 04:40

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:

Thanks a ton for the genuine solution, you saved my day mate. Many Thanks :) — vivekkupadhyay, Mar 15 '18 at 10:17

score 2 · Answer 3 · answered Dec 14 '14 at 08:55

2

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

answered Dec 14 '14 at 08:55

svnm

22,878
21
90
105

1

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. – allanberry Aug 26 '15 at 15:39
Maybe account for that with a negative margin on the parent wrapper? – JamesWilson Sep 17 '15 at 18:47

Soufiane Douimia · Answer 4 · 2016-01-31T14:34:08.740

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

score 1 · Answer 5 · edited Aug 08 '16 at 05:06

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

edited Aug 08 '16 at 05:06

Billal Begueradj

20,717
43
112
130

answered Aug 08 '16 at 04:43

Sourov Roy Chowdhury

113
5

score 0 · Answer 6 · answered Nov 28 '15 at 22:41

.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]
        });

score 0 · Answer 7 · answered Dec 27 '16 at 08:26

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

score -1 · Answer 8 · answered Oct 22 '15 at 08:06

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>

how add spaces between owl carousel item

8 Answers8

Linked