Как добавить маржу между совой карусели

Question

Я хочу добавить margin-left или margin-right между элементами карусели. Но не margin-left для первого элемента. ниже мой код. Как я могу применить к этому.

$("#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

Вместо применения CSS в JavaScript примените его в соответствующей таблице стилей. Тогда он становится простым:

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

Answer 2

CSS решение:

Что сказал Майкл Аарон Сафьян на самом деле не «лучший» способ сделать это. Правильный способ сделать это будет:

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

Если вы делаете это по-другому, вы не обращая внимания на всю «Каскадное» часть CSS.

Sidenotes

Owl Carousel 1:

Убедитесь, что вы не установите все лишние опции для Owl Carousel. Если вы посмотрите на доступные параметры, вы увидите, что многие из них являются логическими значениями, которые по умолчанию равны 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 
}); 

Сова Carousel 2

И просто ответить на ваш вопрос еще лучше, если вы решили использовать Сова Карусель 2:

Сова Карусель 2 имеет опцию иона, чтобы установить правый край пикселя для ваших элементов слайдера, используя параметры (Owl Carousel 2: Options). Используя это, вы можете свести свой CSS к минимуму.

Маржа

Тип: Number
Значение по умолчанию: 0

Маржа правый (ПВ) по пункту.

Answer 3

Привет Вы можете использовать это шаги

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

Или вы можете следовать этот учебник: http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

Answer 4

Ответы, даваемые вызвало некоторые проблемы для меня, где дополнительный запас на .owl-item вызвал Owl Carousel (v1.3), чтобы смещать элементы - после перехода на следующий слайд все еще была видна небольшая щель первого слайда.

Лучше было бы добавить маржу к элементу внутри в .owl-item, например, так:

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

Не забудьте заменить .my-div выше селектором какой вы есть внутри .owl-item.

Как упоминалось в @ Brannie19, если вы используете Сову Карусель 2, вы можете использовать опцию margin.

Answer 5

Этот код работает для меня

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

Answer 6

Привет вы также можете изменить отступы только для одной карусели:
CSS:

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

и добавить этот класс для всех элементов карусельных:
JQuery:

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

Таким образом, с карусели нет сдвига.