Swipe cards using Greensock

[LeoZ 12 Likes (Newbie)]

Hello all, How can I swipe these cards on desktop and touch devices using GreenSock?

I'm trying to apply swipe effect on cards and move cards same as clicking on next and previous button. Anyone help me with that?

Thanks in advance.

See the Pen xJBmwN by LeoZoe (@LeoZoe) on CodePen

[Sahil 2,541 Likes (Superhero)]

If you just want to swipe and don't want to redo all your work, then you can use trick as in following demo.  I am just using Draggable to detect swipe, you can add that on top of your demo.

 

See the Pen EopaYe by Sahil89 (@Sahil89) on CodePen

 

If you want to drag and willing to recreate everything then take a look at demo by @OSUblake in following thread. That's where my second journey with GreenSock started.

 

The demo is responsive and you can use media queries as well, given that all your slides are of same width.

 

 

[LeoZ 12 Likes (Newbie)]

Hi Sahil, thank you for your help. I tried to put draggable code top of my demo code. It shows drag area between two cards but not actually dragging slides just like your below codepen demo. Can you please check my above codepen. would you also please show me how to do below swiping in my carousel (above codepen already updated).

See the Pen gGLaMv by Sahil89 (@Sahil89) on CodePen

 

[Sahil 2,541 Likes (Superhero)]

Ohk there is too much confusion here.

 

You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it.

 

Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead.

 

Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.

 

See the Pen pZBMVK?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[LeoZ 12 Likes (Newbie)]

Actually, I have read through the both links but did not understand very well and I was not aware that I have to trigger buttons too. But thank you so much for your help and valuable feedback at the end. I'm trying hard to learn this all. Just one more thing, I guess I need to download "Draggable" plugins to achieve this. Am I right?!

[Sahil 2,541 Likes (Superhero)]

Ya you will need Draggable. I added some comments in the demo so you can understand what is happening.

[LeoZ 12 Likes (Newbie)]

Thank you so much for your all help Sahil!

 

[LeoZ 12 Likes (Newbie)]

Sorry Sahil but one more question about Draggable. Is there any way we can disabled drag event after swiping the cards and enable it. I read about disable() and enable() methods. But did not understand very well!

[Sahil 2,541 Likes (Superhero)]

My intentions weren't to discourage you from posting anymore questions, so don't hesitate.

 

You can enable disable draggable entirely using those methods, but you can't disable certain methods. You will need to add conditional logic instead to avoid execution of certain code.

 

But I am not sure why do you need it, It works just fine as it is. Are you using onDrag event instead of onDragStart? You don't need to do that. onDragStart fires only once and it fits perfectly with what you are doing.