Search the Community

Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){ TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); x.click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });