Блоков в слайдере сейчас 3. Они выстроились по вертикали, а слайдер нужен горизонтальный. в js написал брекпоинты, когда уменьшается размер экрана блоков в слайде должно стать меньше, но все как то криво работает, не могу понять почему. Приложил полный код, на кодпене (ссылка в самом низу)
/*скрипт для слайдера*/
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
970:{
items:1
}
}
})
<section class="action">
<div class="container">
<p class="action__title">
Акции и спецпредложения
</p>
<div class="action__item-wrap ">
<div class="owl-carousel owl-theme">
<div class="action__item ">
<span class="action__subtitle">Акция</span>
<p class="action__description">
Ремонт автомобилей <br>
отечественного <br>
производства <br>
<span class="action__description_bold">со скидкой до 50%</span>
</p>
<span class="action__date">До 24.02.17</span>
</div>
<div class="action__item">
<span class="action__subtitle">Акция</span>
<p class="action__description">
Диагностика <br>
топливных систем <br>
Common rail <br>
<span class="action__description_bold">БЕСПЛАТНО</span>
</p>
<span class="action__date">До 24.02.17</span>
</div>
<div class="action__item ">
<span class="action__subtitle">Акция</span>
<p class="action__description">
При капитальном <br>
ремонте ДВС <br>
проточка блока <br>
<span class="action__description_bold">В ПОДАРОК</span>
</p>
<span class="action__date">До 24.02.17</span>
</div>
</div>
</div>
</div>
</section>
Полный код
codepen.io/novamoscow/pen/GWWyer?editors=1100