[Slideshow with pagination & next/prev buttons]

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);

})();

}

});