Search the Community

Hi all, I have made an dynamic infinite slider containing animated text for a WP theme but am having some problems. The slider itslef works fine but trying to use a back button on the slider is causing problems. For some reason when I hit 'back' the first slide works OK but then on the second slide the text animation skips, then a while later the one of the functions (the one that moves the position of the of screen image) fails to fire and everything goes out of sync. I have tried reversing, play/pause and a bunch of other things but nothing seems to work. The JS is below and a version of the slider can be found at http://pm.demosite.me.uk/ jQuery(window).load(function(){ var tl1 = new TimelineMax(); var tl2 = new TimelineMax({onComplete: upDatePosition}); var tl3 = new TimelineMax(); var imgArray = []; var contentArray = []; var headArray = []; var subArray = []; var pArray = []; var imgLength = 0; var photoContWidth = 0; var imgWidth = 0; var n = jQuery("#ffslider li").length; var endArray = (n - 2) * '100' + '%'; var picWidth = jQuery(window).width(); var nextBtn = jQuery("button#next"); var prevBtn = jQuery("button#last"); //alert(imgLength); function setDefaults(){ // number of images imgLength = jQuery('#ffslider li img').length; // Full % width of slider photoContWidth = (imgLength * 100) + '%'; //looping through the image length and putting a button and assoc name attr to the btn for(var i=0; i<imgLength; i++){ jQuery('#ffslider li').eq(i).attr('id',i); jQuery('.slidercontent').eq(i).attr('name','slidecontent'+i); jQuery('.slidercontent h3').eq(i).attr('class','slidehead'+i); jQuery('.slidercontent h4').eq(i).attr('class','slidesub'+i); jQuery('.slidercontent p').eq(i).attr('class','slidep'+i); jQuery('#ffslider li').eq(i).css('left', (i * 100) + "%"); jQuery('.slidercontent').eq(i).css('left', (i * 100) + "%"); jQuery('.slidercontent h3').eq(i).css('left', (i * 100) + "%"); jQuery('.slidercontent h4').eq(i).css('right', (i * 100) + "%"); jQuery('.slidercontent p').eq(i).css('left', (i * 100) + "%"); imgArray.push(jQuery('#ffslider li').eq(i)); contentArray.push(jQuery('.slidercontent').eq(i)); headArray.push(jQuery('.slidercontent h3').eq(i)); subArray.push(jQuery('.slidercontent h4').eq(i)); pArray.push(jQuery('.slidercontent p').eq(i)); } startAnimation(); } function startAnimation(){ tl1.to(contentArray, 0.1, {autoAlpha:1}) .add(TweenMax.to(headArray, 0.5, {left:"20" + '%', autoAlpha:1})) .add(TweenMax.to(subArray, 0.5, {left:"30" + '%', autoAlpha:1})) .add(TweenMax.to(pArray, 0.5, {left:"40" + '%', autoAlpha:1})) .add(TweenMax.to(headArray, 0.5, {left:"-100" + '%', autoAlpha:0, delay:3})) .add(TweenMax.to(subArray, 0.5, {left:"100" + '%', autoAlpha:0})) .add(TweenMax.to(pArray, 0.5, {left:"-100" + '%', autoAlpha:0})); endAnimation(); } function endAnimation(){ tl2.to(imgArray, 1, {left:'-=100' + '%', delay:7}) .to(contentArray, 0.1, {left:'-=100' + '%'}); } function upDatePosition(){ for( var i=0; i<imgLength; i++){ if((imgArray[i].css('left') <= '-picWidth')){ imgArray[i].css("left", (n - 1) * '100' + '%'); } if((contentArray[i].css('left') <= '-picWidth')){ contentArray[i].css("left", (n - 1) * '100' + '%'); } } startAnimation(); } function backDatePosition(){ for( var i=0; i<imgLength; i++){ if((imgArray[i].css('left') >= (n - 1) * '100' + '%')){ imgArray[i].css("left", '-100%'); } if((contentArray[i].css('left') >= (n - 1) * '100' + '%')){ contentArray[i].css("left", '-100%'); } } tl3.to(imgArray, 0.1, {left:'+=100' + '%'}).to(contentArray, 0.1, {left:'+=100' + '%'}); startAnimation(); } setDefaults(); nextBtn.click(function(){ tl1.totalTime( tl1.totalDuration() ); tl2.totalTime( tl2.totalDuration() ); }); prevBtn.click(function(){ tl1.totalTime( tl1.totalDuration() ); tl2.seek(0); backDatePosition(); }); });