0

Всем доброго вечера. Возникла проблема с owl carousel, при первой загрузке страницы width равен 0 и, естественно, слайдер не отображается. После обновления страницы все ок пересчитывается. Никаких ошибок нет, не могу понять, в чем проблема. Может кто сталкивался с подобным?

Инициализация

$(document).ready(function(){
  $('.main_slider').owlCarousel({
    autoplay: true,
    autoplayTimeout: 3000,
    autoplaySpeed: 1000,
    navSpeed: 1000,
    dotsSpeed: 1000,
    dragEndSpeed: 1000,
    loop:true,
    nav:true,
    thumbs: false,
    navText: ['<i class="icon-prew"></i>','<i class="icon-next"></i>'],
    navContainer: '.arrows',
    center: true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:1,

        },
        1200:{
            items:3,
            autoWidth: true,
        }
    }
})
});

Стиль owl stage при первичной загрузке - transition: 1s; width: 0px; transform: translate3d(960px, 0px, 0px);.

Разметка:

<div class="slider_arrows">
    <div class="main_slider owl-carousel">
        <?php $posts = get_slider(); foreach ($posts as $post): setup_postdata($post);?>
        <img src="<?php the_post_thumbnail_url('slider-img'); ?>" alt="<?php the_title();?>">
        <?php endforeach; wp_reset_postdata();?>
    </div>
    <div class="arrows_block">
        <div class="arrows container"></div>
    </div>
</div>

Удалять WP функции не стал.

Очень странно, ведь ставил owl carousel на другом проекте, той же версии и с похожими настройками, там все ок... Мистика ))

2
  • Без кода и разметки не разобраться...
    – Cheg
    20 авг 2017 в 16:02
  • Добавил инициализацию и разметку.
    – Mikicit
    20 авг 2017 в 16:09

1 ответ 1

0

Нашел в чем проблема. Проблема в том, что скрипт выполнятся быстрее, чем загрузятся все изображения. Поэтому, при использовании свойства autoWidth, ему не с чем работать (вроде так).

Поставил $(window).on('load',function() вместо document ready, работает и глюка нет.

Правда, остался вопрос с плавным появлением (сейчас резко), но это уже другая тема ) Попробую задать ширину в CSS, ибо с JS прыгает )

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.