CMS Filter with SwiperJS not working properly

Attributes
1

Hi on this project: https://wmb-godandy.webflow.io/ I’m using SwiperJS with CMSFilter. However, when I apply a filter it has some weird behavior and it is not working properly.

It is right after the hero section in the section named ‘Dandies Gallery’

For example, when I apply a filter I can continue to click the slides even though there aren’t that many.

Is it possible to get this fixed to the proper amount of available items?

I’ll include the share link as well: Webflow - GoDandy

Thanks in advance.

Very best,

Bart

2

Hey @Bart! Can you please test this code? We update the Slider each time new results are rendered on the page maintaining the original setup, this will also prevent the slider from working when there are not enough slides to navigate it properly.

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {
    console.log('cmsfilter Successfully loaded!');

    const [filterInstance] = filterInstances;

    const swiperGallery = new Swiper('#gallery', {
      slidesPerView: 4,
      speed: 400,
      spaceBetween: 20,

      keyboard: {
        enabled: true,
      },

      navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
      },
    });

    filterInstance.listInstance.on('renderitems', (renderedItems) => {
      swiperGallery.update();
    });
  },
]);

Let me know how it goes!

3

@Support-Luis thanks for the code. It works! Could you maybe help me as well with the swiper in general. It seems it doesn’t initialize properly at first. It breaks the navigation when I use the arrows. Do you know what could be causing this issue?

4

You are welcome!

Which arrows are you referring to? Keyboard arrows? Navigation of the slider?

Could you record a quick loom on the issue you are facing? I’ll gladly take a look!

5

@Support-Luis Of course! GoDandy sliders | Loom as you can see in the Loom, when I click on the arrows initially it works, but when I click the previous arrow it only works once and then it goes to its disabled state. This also happens on the products page.

6

Hey @Bart! I am not sure what could be happening here :thinking:

I moved the script from Slater into the page </body> section of the page.

Here is a loom:

You can see I changed nothing and the slider works as expected

7

Ok, so just get them out of slater and put them directly in the page settings? I’ll give it a shot. Thanks for checking! :smile:

8

Correct! Let me know how it goes!

9

It doesn’t fix the issue for me :frowning_face:, I tried putting it directly on the page but it doesn’t change a thing on the homepage and it breaks the slider on the products page.