Add Next and Prev buttons to a draggable slider

[FLYPILOT]

I'm using this slider from an other gsap question, however I would like to add buttons to go to next and prev slide. However I'm not totally aware in how can add this functionality. I've been looking on "startDrag()" method but didn't get it. Can someone help me with that?

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

[elegantseagulls]

You'll want to just add buttons to tween the draggable instance by one snapX...

More clarity can be found here:

and:
 

 

[FLYPILOT]

Hey thanks for the response, however I still no able to reproduce that, I just copy and pasted this example 

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

 and I'm getting a weird error: 

 

is that possible just to add an example. how to use the previous example I send to add the buttons functionality? without use loop?

[Rodrigo]

Hi,

 

Do you have a minimal demo that shows that error?

 

Is really hard for us to find a problem or do any debugging with just that information you provide and a working example. Please keep the demo as simple as possible.

 

Happy Tweening!

[GreenSock]

That error almost always means you forgot to register a plugin and you're in a module environment. Make sure you're running the code when the window and document are defined. For example, if you're in an SSR environment and try to run anything GSAP-related when the window/document aren't defined, you'll have problems. So you'd just tuck that code into a block that only runs after the window/document are defined. 

 

gsap.registerPlugin(Draggable, InertiaPlugin); // remove InertiaPlugin if you don't have it.

 

[FLYPILOT]

Hi guys, thanks for all the help, however I've found a simple solution using the first example:
 

prevButton.addEventListener("click", function(e) {
    if(slideIndex >= 2) {
      slideIndex = 1
    }
    baseTl.tweenFromTo(slideIndex, slideIndex += 0.25, {immediateRender: true, duration: 1, ease: "power1.inOut"})
  })
  
  nextButton.addEventListener("click", function(e) {
    if(slideIndex <= 0.75) {
      slideIndex = 1.75
    }
    baseTl.tweenFromTo(slideIndex, slideIndex -= 0.25, {immediateRender: true, duration: 1, ease: "power1.inOut"})
  })

this maybe not the optimized solution, but is currently working for 4 items, I think I do need to find a better solution though.

But about the error, I've registered all plugins, and I just did a simple copy and paste code.

[GreenSock]

2 hours ago, FLYPILOT said:

this maybe not the optimized solution, but is currently working for 4 items, I think I do need to find a better solution though.

Yeah, that's probably not the best long-term or flexible solution. You really need to make sure things are synchronized across the various interaction possibilities, like if the proxy's x value doesn't get updated according to your new positioning, then the next time you drag you'd probably see things jump. And you'd need to keep track of the index (as it looks like you were) in order to accommodate multiple fast clicks where the user wants to jump ahead mid-tween. It's all just logic stuff that's entirely doable but not exactly simple for us to do for you. We're happy to answer GSAP-specific questions here; we just don't have the resources to wade into building customized logic stuff for your particular implementation for free. We do offer paid consulting services, so if you need some help you can feel free to reach out to us directly for that. 

 

2 hours ago, FLYPILOT said:

But about the error, I've registered all plugins, and I just did a simple copy and paste code.

I'd be willing to bet that you didn't register Draggable before you ran that code (or maybe you did, but it was at a time when window/document were not defined).  It's pretty much impossible to know without seeing a minimal demo where that error is being thrown. 

 

Thanks for being a Club GreenSock member, @FLYPILOT! ?

[Giovanni Invernizzi]

On 3/29/2023 at 8:01 PM, FLYPILOT said:

Hi guys, thanks for all the help, however I've found a simple solution using the first example:
 

prevButton.addEventListener("click", function(e) {
    if(slideIndex >= 2) {
      slideIndex = 1
    }
    baseTl.tweenFromTo(slideIndex, slideIndex += 0.25, {immediateRender: true, duration: 1, ease: "power1.inOut"})
  })
  
  nextButton.addEventListener("click", function(e) {
    if(slideIndex <= 0.75) {
      slideIndex = 1.75
    }
    baseTl.tweenFromTo(slideIndex, slideIndex -= 0.25, {immediateRender: true, duration: 1, ease: "power1.inOut"})
  })

this maybe not the optimized solution, but is currently working for 4 items, I think I do need to find a better solution though.

But about the error, I've registered all plugins, and I just did a simple copy and paste code.

Hello Flypilot, can I ask you where and how you defined the variable "slideIndex"?

 

Thanks!