How to add margin between owl carousel

Question

I want to add margin-left or margin-right between carousel items.but not margin-left for first item. below is my code.how can i apply to this.

$("#carousel").owlCarousel({
        items : 4,
        itemsCustom : false,
        itemsDesktop : [1199,4],
        itemsDesktopSmall : [980,2],
        itemsTablet: [768,1],
        itemsTabletSmall: false,
        itemsMobile : [479,1],
        singleItem : false,
        itemsScaleUp : false,

        //Basic Speeds
        slideSpeed : 200,
        paginationSpeed : 800,
        rewindSpeed : 1000,

        //Autoplay
        autoPlay : true,
        stopOnHover : false,

         //Auto height
        autoHeight : true,
    });

Answer 1

Hi You can use this steps

    $('.owl-carousel').owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Or you can follow this tutorial :http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

Answer 2

Instead of applying the CSS in JavaScript, apply it in a proper stylesheet. Then it becomes simple:

.carousel-item {
  margin-left: 10px;
}
.carousel-item:first-child {
  margin-left: 0;
}

Answer 3

CSS solution:

What Michael Aaron Safyan said is actually not the "best" way to do it. The proper way to do it would be:

.carousel-item + .carousel-item {
   margin-left: 10px;
}

If you do it the other way, you're disregarding the whole "Cascading" portion of CSS.

Sidenotes

Owl Carousel 1:

Make sure you don't set any redundant options for your Owl Carousel. If you look at the available options, you'll see that many of them are booleans that default to false. For instance, all of the following options are default settings.

itemsCustom: false
itemsTabletSmall: false
singleItem: false
itemsScaleUp: false
slideSpeed: 200
paginationSpeed: 800
rewindSpeed: 1000
stopOnHover: false

If you remove all of these, your code will be the following neat little snippet:

$("#carousel").owlCarousel({
    items : 4,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,1],
    itemsMobile : [479,1],

    //Autoplay
    autoPlay : true,

     //Auto height
    autoHeight : true
});

Owl Carousel 2

And just to answer your question even better, if you'd decide to use Owl Carousel 2:

Owl Carousel 2 has an option to set a right pixel margin to your slider items by using options (Owl Carousel 2: Options). By using this you can keep your CSS to a minimum.

margin

Type: Number
Default: 0

margin-right(px) on item.