Issue with Slick Slider

Design help Custom code
1

Hey everyone,

I was wondering if someone could help me resolve an issue with some JS. I’m using Slick Slider on one of my sites. Here is the page in question and the slider is under “Community and Biodiversity Impacts”
https://nabatik.webflow.io/projects/khobar

As I keep pushing the right arrow to scroll through my items, once at the end of the list, it doesn’t stop scrolling when I keep pushing the button, scrolls the items right out of view.

Screenshot_1
Screenshot_12690×1749 279 KB

As I understand the issue is the following: There are 17 items alltogether, conditional visibility is used to only show the items activated in the CMS. However, the script keeps calculating the full length of the track based on the combined width of all 17 items, no matter how many are actually visible.

To demonstrate, on this page, I activated all cards, so it properly stops at the end:
https://nabatik.webflow.io/projects/riyadbank

Is there any way to resolve this easily? Can anyone help please? Thank you so much!

Share link:

https://preview.webflow.com/preview/nabatik?utm_medium=preview_link&utm_source=designer&utm_content=nabatik&preview=9c98b019465a44a8db20846a1655c58f&pageId=643432bdedb324359a58b266&itemId=651426ae53f097a22d103b40&workflow=preview

2

Try adding the the filter function after you initialize the slider.

$('#cms-slider').slick('slickFilter',':hidden');