Jump to content
Search Community

How to animate a cards slider that can scroll infinitely to the right and left with progress bar

ihollarmide test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello there.
I have a slider with 10 cards that I am trying to implement. The slider has the following characteristics:

  • This slider has the next and previous buttons.
  • Clicking of the next button should move the slider forward from card 1 to card 2 or from card 2 to  card 3 and so on. Clicking of the previous button should move the slider backwards from card 3 to card 2 or card 2 to card 1.
  • The progress bar should be filled as the cards are moving. Having 10 cards mean a movement from one card to another increases the progress by 10%. Being at card 1 means the progress bar has a progress of 10% and card 10 means a completely filled progress of 100%.
  • Here are the tricky parts, 1. When the slider reaches card 10 on forward movement, it should automatically slide forward to card 1 and update the progress bar to 10%.  2. When the slider reaches card 1 on backward movement, it should automatically slide backward to card 10 and update the progress bar to 100%.
  • The slider should be draggable because of mobile devices. Autoplay is a bonus.

    I would really appreciate any help of sort. Thank you all.

See the Pen bGRONeK by iolamide (@iolamide) on CodePen

Link to comment
Share on other sites

1 hour ago, OSUblake said:

Hi ihollarmide,

 

I would start by checking out the Helper Functions page. You should be able to do everything you want with the seamless loop.

https://greensock.com/docs/v3/HelperFunctions#loop

 

I just discovered that the last element is being added to the first element in the while ignoring all margins and spacings between the elements. Is there any workaround for that?

spacing.png

Link to comment
Share on other sites

13 minutes ago, ihollarmide said:

It worked. But do you think there is a way to set a dynamic paddingRight based on device width (either desktop, tablet and phone)

Not an automated way, no, but you can run conditional logic: 

paddingRight: window.innerWidth < 500 ? 10 : 20

Or use matchMedia(). It's more cumbersome because you may need to destroy/recreate things, save the progress, etc. 

  • Like 2
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Not an automated way, no, but you can run conditional logic: 

paddingRight: window.innerWidth < 500 ? 10 : 20

Or use matchMedia(). It's more cumbersome because you may need to destroy/recreate things, save the progress, etc. 

Thank you. I will write a conditional logic for it.

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