2016-01-27 3 views
1

В настоящее время у меня есть так, что если вы нажмете на любую из пронумерованных кнопок, кнопки next/prev или изображение в карусели, скрипт отрегулирует карусель, чтобы переместить ее к центру окна просмотра. Тем не менее, я заметил, что если вы нажмете на любую из этих кнопок, связанных со второй карусели, страница прокрутит весь путь назад и настроится на первую карусель. Как я могу получить его, чтобы отрегулировать правильную карусель? Например, нажатие любых кнопок, связанных с карусели № 2, регулирует карусель №2 или нажатие любых кнопок для карусели № 3, регулирует карусель №3.Нажатие кнопки центрирует неправильную карусель (JQuery)

$(document).ready(function() { 
    $("#owl-demo").owlCarousel({ 
    navigation: true, 
    pagination: true, 
    lazyLoad: true 
    }); 
}); 

$(document).ready(function() { 
    $("#owl-demo2").owlCarousel({ 
    navigation: true, 
    pagination: true, 
    lazyLoad: true 
    }); 
}); 

var el = $('.owl-carousel .lazyOwl'); 
$('.owl-carousel, .owl-thumb-item').on('click', function(e) { 

    // var el = $(".lazyOwl", this); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } else { 
    offset = elOffset; 
    } 
    var speed = 700; 
    $('html, body').animate({ 
    scrollTop: offset 
    }, speed); 
}); 

var animations = new Array(); 
// queue all 
$(".owl-thumb-item").each(function() { 
    animations.push($(this)); 
}); 

// start animating 
doAnimation(animations.shift()); 

function doAnimation(image) { 
    image.fadeIn("slow", function() { 
    // wait until animation is done and recurse if there are more animations 
    if (animations.length > 0) doAnimation(animations.shift()); 
    }); 
} 

http://jsfiddle.net/8bJUc/662/

ответ

0

Вы почти были правы! Вместо того, чтобы:

//var el = $(".lazyOwl", this); 

Вы должны использовать это:

var el = $(this); 

http://jsfiddle.net/8bJUc/665/

Прыжки "задержка" вызвана анимации. Если вы удалите анимацию, она сразу показывает правильную позицию:

// $('html, body').animate({ 
// scrollTop: offset 
// }, speed); 
    $('html, body').scrollTop(offset); 
+0

Когда вы нажимаете пронумерованные кнопки, есть какая-то «задержка». Как будто он слегка сдвигается, прежде чем, наконец, совершит весь путь. – user2252219

Смежные вопросы