Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bartmc

GSAP Slider/Carousel, Next and Previous Buttons

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

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

RD

  • Like 2
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 2
  • Thanks 1
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

.

Edited by Web Dizajner
I found answer https://greensock.com/forums/topic/21124-how-to-create-basic-slideshow/
  • 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.
×