Jump to content
Search Community

Draggable and Inertia plugins - slider with active item

Catalin R. test
Moderator Tag

Recommended Posts

Hello,

I have a draggable slider where I use draggable and inertia GSAP plugins. I don't know where my mistake is into my code, I can't see all items (last 4) by dragging.

The "div's" with class "box" are links inside of a navbar (menu, header), one of them has class "active" and white colored. And, I don't know which gsap method to use when a page is loaded, the item with class "active" to be visible (slider dragged properly)!

If anybody has a little time, please help me!

Thanks!

See the Pen jOBByXa?editors=0010 by ZenTao (@ZenTao) on CodePen

Link to comment
Share on other sites

19 hours ago, Catalin R. said:

I have a draggable slider where I use draggable and inertia GSAP plugins. I don't know where my mistake is into my code, I can't see all items (last 4) by dragging.

It looks to me like a logic issue in your sizeIt() function. BEFORE you set the width of the container to be wider, the boxes are actually wrapping in some browsers (Firefox for me). That makes your offsets incorrect: 

0: -0
1: -50
2: -100
3: -150
4: -200
5: -250
6: -0
7: -50
8: -100
9: -150
10: -200
11: -250
12: -0
13: -50

You should set the width of the container FIRST and then loop through and calculate the offsets. 

 

19 hours ago, Catalin R. said:

And, I don't know which gsap method to use when a page is loaded, the item with class "active" to be visible (slider dragged properly)!

Are you asking how to move the ".boxes" element far enough to make sure that whichever [one] ".active" element is visible? Like...centered in the area or on the far left or far right? You should be able to just use a selector to find the ".active" element and calculate how far away it is and then offset the "x" accordingly. 

 

Does that help at all? 

  • Like 2
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...