Jump to content
GreenSock

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

Help Needed to dynamically calculate container widths

Recommended Posts

Hi everyone! 

 

Happy to pay someone to assist me with the enclosed pen.

I can offer $50/hr. 

 

My question is how to calculate the width of the slide container with slides of varying widths.

Otherwise, the pen works as needed. 

Thanks for looking!! 

 

See the Pen rNGyPev by evryali (@evryali) on CodePen

 

Link to comment
Share on other sites

Hi @pietM,

Both `.slides-container` and `.slides-inner` are set to 100% of the viewport. Their widths are not changing.
So do you wish to know the sum of all slides width or just the width of each slide individually?

  • Like 1
Link to comment
Share on other sites

Thanks for taking a look @warkentien2

I really appreciate. 

 

The container can remain at 100vw, but I want individual slides to have "auto" widths. Because each slide is set with an "absolute" position, I can't get the flex to distribute the slides without compromises to the slider functionality.

 

Does that make sense?  

 

Here's a non-GSAP example for reference. 

 

See the Pen 0b47c43127aebcc42a7cd6a674a93882 by evryali (@evryali) on CodePen

 

Basically, I want to keep all of the functions in the GSAP slider in the first post, but apply it to a container with images of varying widths. 

Link to comment
Share on other sites

I understand now.

Sliders are tricky. There are plenty of working sliders with this feature.
E.g.: Slick see "Variable Width."

If you're making your own slider, you might wan't to make it draggable, scrollable, scrollable with "snap into center", and with arrow and dot navigation. Depending on your needs the approach will be different. And it'll take a couple of days to get it just right.
 

Link to comment
Share on other sites

Thanks @warkentien2 ! 

 

I'm familiar with all the slider libraries. Thanks! 

How about adding an autoplay function to this one? 

You can click the left / right side of viewport to advance the slider.

 

See the Pen poWXbdQ by evryali (@evryali) on CodePen

 

 

Link to comment
Share on other sites

Hi again @warkentien2

 

I was able to work to a solution with GSAP's  horizontalLoop() helper. 

 

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


Thanks again for your help! 

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