Jump to content
Search Community

timeline slider - restarting using forward button

uRmum 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

Hey guys ! I've been trying to make this slider for the couple couple of days without much success. 

I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. 

 

Here is a snippet of my js.

 


$(".right-arrow").click(function() {
    
    var contentSlides = $('.slider .slide');
    
    var currentSlide = 0,
        tl = new TimelineMax();
    

            tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10} );    
            
            if ( currentSlide < contentSlides.length ) 
            {    
                currentSlide++;
            }
            
    
            else if( currentSlide == (contentSlides.length -1) )
            {
                currentSlide = 0;
            }
            
            
            tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 100% 0 0)", x: -40}, {webkitClipPath: "inset(0 0 0 0)", x: 0} )

    
    
});

 

 

Thanks in advance

 

Link to comment
Share on other sites

Hm, it's tough to diagnose without seeing a codepen demo, but it looks to me like one of the biggest problems is that you're setting currentSlide to 0 INSIDE your click function. So it'll never get past the second one :) I think you mean to declare that variable outside your click function, right? 

 

I'd also be careful about using clip-path because it's not very well supported across browsers yet. It probably doesn't perform terribly well either - maybe just use a container <div> with overflow:hidden? Just a thought.

 

If you still need help, please provide a reduced case in codepen since that'll allow us to identify issues much more quickly. 

 

Happy tweening!

  • Like 2
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...