Почему owl carousel отображает слайд неправильно?

Question

[leni_m]

<div class="owl-carousel">
    <img1>
    <img2>
    <img3>
</div>

у блока .owl-carousel ширина 1267px.
Далее:

$('.owl-carousel').owlCarousel({
        items: 1
    });

И слайдер расчитывает ширину одного слайда(.owl-item) в 1250px, из за чего вылезает кусочек следующей картинки. Как исправить?

Answer 1

[tyzberd]

Проблема в ваших стилях наверно
https://codepen.io/anon/pen/OEgmqR

Comments

[leni_m]

действительно, всё портил стиль

.owl-carousel {
    height: 538px;
}

а без него слайдер сам подстроился под эту высоту, спасибо!

Answer 2

[profesor08]

Советую вообще избегать слайдеров, которые устанавливают какую либо высоту или ширину для элементов. Это сразу ставит крест на адаптивности и использовании слайдера без каких-то костылей.