Help on removing gap due to slick slider with CMS collection

[Stazzyboo (Staz)]

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: https://preview.webflow.com/preview/portfolio-e2dcba?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-e2dcba&preview=27e2ef7196a52a77eecf08d9d3dd13d5&pageId=604e5a6d1a63f05aa1557f21&mode=preview
Here is my site Read-Only: https://preview.webflow.com/preview/portfolio-e2dcba-029a34b2b853768d9b55b7?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-e2dcba-029a34b2b853768d9b55b7&preview=83d67e18f199e06a52c61239f235aa3d&mode=preview

[Stazzyboo (Staz)]

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: https://preview.webflow.com/preview/portfolio-e2dcba?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-e2dcba&preview=27e2ef7196a52a77eecf08d9d3dd13d5&pageId=604e5a6d1a63f05aa1557f21&mode=preview (will move to original in post within the next few days so check there if not here)

[Stazzyboo (Staz)]

Zelish, I provided a new link in the solution part of the answer It will look wonky in the copy but when you go to page preview it’s perfect, I also fixed arrow issues, etc. [https://preview.webflow.com/preview/portfolio-e2dcba?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-e2dcba&preview=27e2ef7196a52a77eecf08d9d3dd13d5&pageId=604e5a6d1a63f05aa1557f21&mode=preview]