отступы в owl-carousel
Использую слайдер owl-carousel, необходимо задать отступы между элементами, так как в различных разрешениях отступы будут разные код js
$(function() {
// Owl Carousel
var owl = $(".mazda-carousel");
owl.owlCarousel({
loop: true,
nav: false,
autoplay: false,
autoplayTimeout: 2000,
smartSpeed: 1000,
animateOut: "slideOutDown",
animateIn: "slideInDown",
});
});
код html:
<div class="models-slider">
<div class="owl-carousel mazda-carousel">
<div class="mazda-model" >
<div class="mazda-image" style="background-image: url('images/mazda2.png')"></div>
<h2>MAZDA 2</h2>
<p>ХЭТЧБЭК</p>
</div>
<div class="mazda-model" >
<div class="mazda-image" style="background-image: url('images/mazda3.png')"></div>
<h2>MAZDA 3</h2>
<p>ХЭТЧБЭК/СЕДАН</p>
</div>
<div class="mazda-model" >
<div class="mazda-image" style="background-image: url('images/mazda6.png')"></div>
<h2>MAZDA 6</h2>
<p>СЕДАН</p>
</div>
<div class="mazda-model" >
<div class="mazda-image" style="background-image: url('images/mazda-cx-5.png')"></div>
<h2>MAZDA CX-5</h2>
<p>ВНЕДОРОЖНИК</p>
</div>
<div class="mazda-model" >
<div class="mazda-image" style="background-image: url('images/mazda-cx-7.png')"></div>
<h2>MAZDA CX-7</h2>
<p>ВНЕДОРОЖНИК</p>
</div>
<div class="mazda-model">
<div class="mazda-image" style="background-image: url('images/mazda-cx-9.png')"></div>
<h2>MAZDA CX-9</h2>
<p>ВНЕДОРОЖНИК</p>
</div>
</div>
</div>