Streaming live at 10am (PST)

Help on removing gap due to slick slider with CMS collection

Thanks in advance for any help! My very first time using Webflow.

I have a CMS project gallery flexbox slider (with arrows and scrollbar) that looks as intended (1st set of slides in project link), when I apply the slick-slider to make it draggable slider it leaves a gap on the right making the arrows/scrollbar not align to last image (2nd set of slides).

In order to make the slides have space I added right padding which all looks as intended until I apply slick slider to it. To make it realign I applied negative margin (third set of slides) however my scroll bar gets cut off and that annoys it (I don’t want to make the track invisible either).

Any ideas on fixes?


Updated link with solution: Webflow - Portfolio
Here is my site Read-Only: Webflow - Copy of Portfolio

Solved on my own!
Ended up hiding scrollbar on overflow and creating a custom one from this source:

Left negative margin on the wrapper and created scroll bar within “content” div block, created “progress” div block with span text inside set to none (hidden). Since this item is outside of the wrapper it doesn’t have negative margin applied.

This was integrated with existing slick slider applied to my CMS collection.

Made mock up in different website read link: Webflow - Portfolio (will move to original in post within the next few days so check there if not here)

1 Like

your website link is not working Webflow - Copy of PortfolioGlobal Digital Magazine

Zelish, I provided a new link in the solution part of the answer :slight_smile: It will look wonky in the copy but when you go to page preview it’s perfect, I also fixed arrow issues, etc. [Webflow - Portfolio]