GSAP Slider/Carousel, Next and Previous Buttons

[bartmc 5 Likes (Newbie)]

Hello!

I'm working on a slider with an overlapping slide transition. It's based on Craig’s response in this post:

 

I've made a demo of my work so far, in the attached pen.

 

I can make the slider auto-play forward and loop, with no buttons, but I’d like to have buttons too. This is what I’m trying to figure out:

 

1. I'd like the slider to loop forward automatically, but if the Next or Previous buttons are pressed, it should move forward (or backward) 1 slide and continue looping forward from there.
2. I'd like the Previous button to decrement from the first slide to the last slide and continue decrementing from there. It’s glitchy decrementing from 1-3 back to 0, always going to slide 4 if you’re on the second loop through the array. but won’t loop backwards past 0 at all.

 

Any help or advice would be much appreciated - including "hire yourself a programmer!"

 

Thank you!

 

 

See the Pen wvgXqeB by bartmc (@bartmc) on CodePen

[PointC 13,769 Likes (Superhero)]

Hey @bartmc 

 

Thanks for being a Club member. Your thread seems to have been missed yesterday. Sorry about that.

 

Here's an auto-play slider with prev/next buttons originally made by @OSUblake and updated to GSAP3 by @GreenSock. I think it should have most of what you need.

See the Pen GRJwLNP by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

 

 

[RDMIQ 2 Likes (Newbie)]

Hello @PointC, thanks for sharing!!

i have been playing around with this carousel and its great, but there seems to be a problem.

This part of the code doesn't respect the 'repeat' property for some reason.

var animation = gsap.to(slides, {
  xPercent: "+=" + (numSlides * 100),
  duration: 1,
  ease: "none",
  paused: true,
  repeat: -1,
  modifiers: {
    xPercent: wrap
  }
});

if i change the 'repeat' to say '1' it keeps looping and doesn't stop. just wondered if there was something i was missing

Thanks

RD  

[GreenSock 16,303 Likes (Superhero)]

@RDMIQ the "repeat" on that particular animation actually has nothing to do with it. The auto-advancing code is running on a delayedCall() that keeps getting restarted (by design). The animation you're referencing is paused anyway - it's just there to have its progress() set in another function. What exactly are you trying to do? Is the goal to STOP the auto-play functionality after a certain amount of iterations? Are you trying to prevent the looping/wrapping so that the whole thing cannot move past the 1 in the negative direction or 10 in the positive direction? 

[RDMIQ 2 Likes (Newbie)]

1 hour ago, GreenSock said:

@RDMIQ the "repeat" on that particular animation actually has nothing to do with it. The auto-advancing code is running on a delayedCall() that keeps getting restarted (by design). The animation you're referencing is paused anyway - it's just there to have its progress() set in another function. What exactly are you trying to do? Is the goal to STOP the auto-play functionality after a certain amount of iterations? Are you trying to prevent the looping/wrapping so that the whole thing cannot move past the 1 in the negative direction or 10 in the positive direction? 

Hello!! thanks for getting back to me about this, yes the goal to STOP the auto-play functionality after a certain amount of iterations.

Can this be done?

 

Thanks 

 

RD

[GreenSock 16,303 Likes (Superhero)]

Sure, you just create a counter variable, iterate it each time autoPlay occurs, and then add conditional logic: 

See the Pen wvdJEXV?editors=0010 by GreenSock (@GreenSock) on CodePen

[RDMIQ 2 Likes (Newbie)]

Wow! thank you, works amazingly. And thanks the schooling there's always some much to still to learn!!

RD

[tailbreezy 220 Likes (Specialist)]

On 4/16/2021 at 11:14 PM, PointC said:

Here's an auto-play slider with prev/next buttons originally made by @OSUblake and updated to GSAP3 by @GreenSock. I think it should have most of what you need.

 

Hey PointC,

 

I am curious how to achieve this showing n slides at a time instead of just the 1.

 

Have tried a few options, but all failed or are too complex for their own sake.

 

Cheers

[PointC 13,769 Likes (Superhero)]

There's a handy helper function for that.

https://greensock.com/docs/v3/HelperFunctions/#loop

 

Happy tweening.

[tailbreezy 220 Likes (Specialist)]

This is indeed a handy helper.

 

What I meant tho was not to do multiple xPercent increases, but to actually show two, three,...n at a time and then move them regularly with saw xPercent: 100. E.g grouping them in a div as an unit, but I cant seem to work out how from the example since flexbox doesnt seem to allow this.

[PointC 13,769 Likes (Superhero)]

hmmm... maybe I'm not understanding, but I think the helper function would work for that. I've forked that example and switched it to go forward/backwards 5 at a time.

 

See the Pen 2cb33399a603622390d57072bd1d6844 by PointC (@PointC) on CodePen

 

You'd adjust lines 77 and 78.

tl.next = vars => toIndex(curIndex+5, vars);
tl.previous = vars => toIndex(curIndex-5, vars);

You can then adjust how many slides are visible with your CSS. Is that what you meant or am I misunderstanding things?

 

[tailbreezy 220 Likes (Specialist)]

Couldn't have hoped for a better reply. Thank you again @PointC.

You are absolutely right, it does what I was looking for.

[Web Dizajner 65 Likes (Contributor)]

.

Edited December 26, 2021 by Web Dizajner
I found answer https://greensock.com/forums/topic/21124-how-to-create-basic-slideshow/