Jump to content
Search Community

Slideshow with pagination & next/prev buttons

webbysmart test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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);
})();
}
});
  • Like 1
Link to comment
Share on other sites

Hello webbysmart, and Welcome to the GreenSock Forum!

 

This really does not look like a GSAP specific question, but more of the logic in which your custom slider pagination works.

 

I am a little confused by your question. But In order to properly see the behavior you are experiencing, Can you please setup a demo example?

 

Here is a great video tut by Carl, on How to setup a CodePen example demo.

 

This way we can see your code in context and in a live testing environment to better help you.

 

Thank You :)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...