Jump to content
Search Community

GSAP Slider/Carousel, Next and Previous Buttons

bartmc test
Moderator Tag

Recommended Posts

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

  • Haha 1
Link to comment
Share on other sites

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.

:)

 

 

  • Like 5
Link to comment
Share on other sites

  • 2 months later...

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  

Link to comment
Share on other sites

@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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 4 months later...
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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

:)

 

  • Like 4
  • Thanks 2
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...
On 12/15/2021 at 7:04 PM, PointC said:

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.

 

This function that you pointed out to is very helpful indeed! But what about adding gaps between slides? How to do that? And slides have to remain responsive as before. It's a common thing these days these gaps between slides!

Link to comment
Share on other sites

Hi @valeriyruss what have you tried your self? Personally I find the only way to learn is to get you heads dirty and dive in to the code. I myself use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

In this case I would just change the CSS to be 100% or what ever with you like and update the items to take up the space you want. 

Link to comment
Share on other sites

@mvaneijgen Thank you for your response.
You are absolutely right - it is much more productive and useful to write the code yourself, look at what comes out of it, and so on.
But I'm not too advanced in JS programming. I am just learning. This slider example is almost exactly what I need at the moment. I tried to understand its code, but so far it is too complicated for me, so I turned to this forum for help. The only thing that I lack in it is that the slides are shown in full when there are gaps and the last one among visible is not cut off.
I think that if such an adjustment was added to horizontalLoop function, then it would only benefit from this. But that's my personal opinion.
GSAP is just great! I started working with it and am very satisfied. Many thanks to the creators!

Link to comment
Share on other sites

Well that is the thing, this has everything to do with CSS. That is also the thing with GSAP, CSS is a really important part when working with GSAP, maybe even the most important part.

 

So that was what I was trying to get you to figure out. The only thing I've changed below is giving the wrapper a width over 100%. This is not exact, because the boxes are 20% and there is a margin of 4px, but those are the things you have to change to get it the way you want. 

 

Hope it helps and happy tweening! 

 

See the Pen JjegdEE?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Again, what have you tried already? 

 

I've removed the margin which was 4px to the right, if you want that back, you'll have to calculate how much space you want in that gap and subtract that from the width and note that the half of the gap also gets added to the last element which will show up at the left of the first element.

 

You could also try using another property  eg gap: or border-right, so much possibilities. Get out pen and paper and good luck with the maths! Again this is all CSS, so no GSAP needed.

 

See the Pen qBQedgV?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

I think I solved my problem with the slider. Now the slider works the way I wanted, but the solution in CSS-code itself is not as beautiful as I would like. Just look at the class "box" in the CSS panel. The solution of the problem is based in general on CSS. Still, it seems to me that accounting for gaps between slides should largely be implemented through a function horizontalLoop in JS.

See the Pen jOQgbJw?editors=0100 by Valeriy-Medvedev (@Valeriy-Medvedev) on CodePen

Thanks to everyone who helped me!

Link to comment
Share on other sites

13 hours ago, valeriyruss said:

it seems to me that accounting for gaps between slides should largely be implemented through a function horizontalLoop in JS.

I'm a bit confused by that - all the helper function needs to concern itself with is the overall bounds of the entire chunk containing all the boxes - it lets you position things however you want with CSS which is the thing that should control formatting/spacing anyway. Why do you think it belongs in the helper function? What if there's non-uniform spacing? The helper function shouldn't have anything to do with layout; it's purely about movement. Maybe I'm missing something? 

  • 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.
×
×
  • Create New...