Jump to content


timeline slider - restarting using forward button

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

Thank you Jack !

Your suggestion of putting it outside worked :):) and thank you for so a quick reply ! 


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