На странице есть слайдер с несколькими вложенными слайдерами.
Первый большой слайдер имеет стандартную горизонтальную прокрутку вложенных слайдов справа налево, вложенные слайдеры меняют изображения вертикально с верху вниз.
При установке параметра "autoplayTimeout" с разными значениями все ломается, при загрузке страницы вложенный слайдер меняет изображения как задумано, но как только происходит первая прокрутка у основного слайдера внутренние перестают меняться совсем. Если задать одинаковые значения в данном параметре то все ок.
Кто то знает куда копать?
<div class="main_slider">
<div class="item">
<div class="lake-slider">
<img src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
</div>
</div>
<div class="item">
<div class="lake-slider">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
</div>
</div>
</div>
$(document).ready(function(){
$(".main_slider").owlCarousel({
loop:true,
merge:true,
autoplay: true,
mouseDrag: true,
responsiveClass:true,
autoplayHoverPause: true,
nav:true,
items:4,
navText:["<svg x='0px' y='0px' width='20px' height='20px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'><path fill='#000' d='M128,256L256,0h128L256,256l128,256H256L128,256z'/></svg>","<svg x='0px' y='0px' width='20px' height='20px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'><path fill='#000' d='M128,256L256,0h128L256,256l128,256H256L128,256z'/></svg>"],
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
$(".lake-slider").owlCarousel({
loop:true,
autoplay: true,
items: 1,
nav: false,
itemElement:"img",
animateIn: 'slideInUp',
animateOut: 'slideOutUp'
});
});
Простой
