Finsweet CMS Filter + Swiper.js

Design help Custom code
1

Hi all,

Is there anyone who could help me? I’m running into a problem with Swiper.js and Finsweet CMS filter.

I’m not really into code, so I don’t know where to look or what to adjust, but the following thing is happening:

The Swiper.js slide makes it possible to create a horizontal infinite slider, which can be controlled by scrolling up and down. On default state (when all projects are visible), it works perfectly. However, when a filter option is applied, the slider doesn’t behave as it should. The slider should re-initialize once a filter is selected, but no matter what I try, I can’t get the result I want.

FYI, the styling of the slider and the page is not finished yet, but I’m first trying to get it to work properly ;)

I’ve tried some different scripts, but this is the basic script:

projectSlider = new Swiper(“.swiper”, {
slidesPerView: “auto”,
freeMode: {
enabled: true,
sticky: true,
},
loop: true,
mousewheel: {
releaseOnEdges: true,
},
breakpoints: {
821: {
slidesPerView: 3,
},
},
});

Thank you!

Here is my site Read-Only: Webflow - Noor Eva Editor

2

And the URL: Home Test

3

To fix the issue, destroy the Swiper instance using projectSlider.destroy(true, true) whenever a filter is applied, then reinitialize it with the updated slides. Use the Finsweet CMS filter event fsChange to detect filter changes and trigger this process. Here’s the key code:

javascript

Copy code

document.addEventListener("fsChange", () => {
  projectSlider?.destroy(true, true); // Destroy old instance
  projectSlider = new Swiper(".swiper", { /* your config */ });
});

This ensures the slider works properly after filtering.

4

Hey @CloudCoder

Thank you for responding. It does work better now! However, there still seems to be an issue with the infinite loop. Once a filter option is selected, it doesn’t seem to clone properly. Any suggestions to fix that?

5

Do you want to fix a meeting to discuss all your problems ?

6

That would be great. How can I contact you?

7

can contact on fiza.astrosia@gmail.com