Share Posted January 20 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 More sharing options...
Share Posted January 20 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? 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 20 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 More sharing options...
Share Posted January 20 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 More sharing options...
Author Share Posted January 20 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 More sharing options...
Author Share Posted January 21 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now