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