javascript - Clicking a button centers the wrong carousel (Jquery) -
currently have if click on of numbered buttons, next/prev buttons, or image in carousel script adjust carousel move center of viewport. however, noticed if click on of buttons associated second carousel, page scroll way , adjust first carousel. how can correct carousel adjusted? example being, pressing buttons associated #2 carousel adjusts #2 carousel or pressing buttons #3 carousel adjusts #3 carousel.
$(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 $(".owl-thumb-item").each(function() { animations.push($(this)); }); // start animating doanimation(animations.shift()); function doanimation(image) { image.fadein("slow", function() { // wait until animation done , recurse if there more animations if (animations.length > 0) doanimation(animations.shift()); }); }
you had right! instead of:
//var el = $(".lazyowl", this); you should use this:
var el = $(this); http://jsfiddle.net/8bjuc/665/
the jumping "delay" caused animation. if remove animation shows right position immediatelly:
// $('html, body').animate({ // scrolltop: offset // }, speed); $('html, body').scrolltop(offset);
Comments
Post a Comment