@Novamoscow

Owl carousel слайдер не корректно отображает слайды. Почему так?

Блоков в слайдере сейчас 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
  • Вопрос задан
  • 1548 просмотров
Решения вопроса 1
ajky
@ajky
Full-stack developer
Добавить основной файл стилей и норм будет
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы