Всем доброго вечера. Возникла проблема с 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 на другом проекте, той же версии и с похожими настройками, там все ок... Мистика ))