Help Needed to dynamically calculate container widths

[pietM 23 Likes (Newbie)]

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

 

[warkentien2 14 Likes (Newbie)]

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?

[pietM 23 Likes (Newbie)]

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. 

[warkentien2 14 Likes (Newbie)]

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.
 

[pietM 23 Likes (Newbie)]

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

 

 

[pietM 23 Likes (Newbie)]

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!