Как устранить перепрыгивание слайдов (owl carousel 2)?

V
На сайте с 04.06.2014
Offline
54
4239

Есть слайдер, работающий на owl carousel 2. Слайдер зациклен (loop:true).

<div id="slider">

<div class="slide"><img src="slides/slide1.jpg" alt="Слайд 1"/></div>
<div class="slide"><img src="slides/slide2.jpg" alt="Слайд 2"/></div>
<div class="slide"><img src="slides/slide3.jpg" alt="Слайд 3"/></div>
<div class="slide"><img src="slides/slide4.jpg" alt="Слайд 4"/></div>
<div class="slide"><img src="slides/slide5.jpg" alt="Слайд 5"/></div>
<div class="slide"><img src="slides/slide6.jpg" alt="Слайд 6"/></div>
</div>

Каждый слайд представляет из себя блок с overflow:hidden, внутри которого картинка с абсолютным позиционированием.

#slider {

width: 900px;
height: 400px;
}

#slider .slide {
overflow: hidden;
margin: 0;
width: 300px;
height: 400px;
position: relative;
}

#slider .slide img {
display: block;
width: 300px;
height: auto;
border: none;
position: absolute;
top: 0;
left: 0;
}

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

var owl = $("#slider");

owl.owlCarousel();

var ItemIndex = $(".owl-item.active:eq(1)").index();

owl.on('changed.owl.carousel', function(event) {
ItemIndex = event.item.index+1;
})

function ChangeSlide() {
owl.trigger('next.owl.carousel');
setTimeout(function() {
ScrollSlide();
}, 1000);
}

function ScrollSlide() {
var SlideHeight = $(".slide:eq("+ItemIndex+") img").height()-400;
$(".slide:eq("+ItemIndex+") img").animate({"top":-SlideHeight}, 1000);
setTimeout(function() {
ChangeSlide();
}, 1000);
}

ScrollSlide();

Проблема в том, что после прокрутки нескольких слайдов слайдер начинает тупить и перепрыгивать некоторые слайды. Почему так может происходить? Может я чего-то намудрил и есть более простой способ сделать подобную анимацию в слайдере?

Партнёрка №1 в essay-нише (https://goo.gl/YfTPtG)
vandamme
На сайте с 30.11.2008
Offline
675
#1

на jsfiddle хотя бы код вставили, лень копировать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий