How to add margin between owl carousel

Question

I want to add margin-leftor margin-rightbetween carousel elements. but not margin-left for the first element. 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

Hello you can use the following 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 guide: http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

Answer 2

Instead of using CSS in JavaScript, apply it in the correct stylesheet. Then it becomes simple:

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

Answer 3

CSS:

, "" . :

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

-, "" CSS.

Sidenotes

1:

, . , , , false. , .

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

, :

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

    //Autoplay
    autoPlay : true,

     //Auto height
    autoHeight : true
});

2

, 2:

Owl Carousel 2 (Owl Carousel 2: ). , CSS .

:
: 0

margin-right (px) .

Answer 4

, .owl-item , Owl Carousel (v1.3) - , .

.owl-item, :

.owl-item + .owl-item .my-div {
  margin-left: 1em
}

.my-div , .owl-item.

@Brannie19, Owl Carousel 2, margin.

Answer 5

.owl-carousel .owl-item img{
  padding: 10px;
}

Answer 6

, :
CSS:

.padding-item{
    padding-right: 15px;
}

and add this class for all carousel elements:
jQuery:

    $('#owl-carousel-identifier').find('.owl-item').each(function(i){
            this.className+=' padding-item';
        });

Thus, with the border of the carousel there is no shift.