Jump to content
GreenSock

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

Gsap slider with prev next buttons

Recommended Posts

Hello guys, 

 

I'm trying to create a slider with the same functionality as in this slider:  but implemented to this slider: https://codesandbox.io/s/loving-snowflake-i8ys9g?file=/nuxt.config.js. Now the problem is that I don't understand all the code in that demo so it is hard to apply it to other demos when you don't know what exactly is going on there. What would I need to be changed so that it would work with my slider? On a single click the slider should move the width of one slide + the padding.

 

I have pasted the code to my demo and set the correct IDs so that the function is connected to the slider.

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

Link to comment
Share on other sites

I don't understand the question/problem. The demo appears to work as expected. Am I missing something? 

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

2 hours ago, GSAP Helper said:

I don't understand the question/problem. The demo appears to work as expected. Am I missing something? 

Did you take a look at this: https://codesandbox.io/s/loving-snowflake-i8ys9g?file=/nuxt.config.js.

 

My problem now is that the slides wrap incorrectly. Thats basically it, everything else seems to work. Is there a simple fix to that or does it require more work?

 

I think this is the line that has to be changed: (on line 59)

var wrap = gsap.utils.wrap(-100, (numSlides - 4) * 100);

 

But I understand if it is too much to ask in here!

Link to comment
Share on other sites

Could maybe someone provide a simple demo of gsap.utils.wrap()?

Link to comment
Share on other sites

10 hours ago, nicolaseielll said:

Did you take a look at this: https://codesandbox.io/s/loving-snowflake-i8ys9g?file=/nuxt.config.js.

 

My problem now is that the slides wrap incorrectly. Thats basically it, everything else seems to work. Is there a simple fix to that or does it require more work?

 

I think this is the line that has to be changed: (on line 59)

var wrap = gsap.utils.wrap(-100, (numSlides - 4) * 100);

 

But I understand if it is too much to ask in here!

I glanced at that, yes, but there's a lot of code in there plus it uses Vue and it's not directly a GSAP question - it's more of a logic thing that'd involve digging deeply into the logic flow of that demo and trying to troubleshoot it for you which is beyond the scope of help we can provide for free in these forums. 

 

8 hours ago, nicolaseielll said:

Could maybe someone provide a simple demo of gsap.utils.wrap()?

Sure, here's a very simple demo: 

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

 

Does that help?

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