# CMS Filter with SwiperJS not working properly **URL:** \ **Category:** Attributes\ **Tags:** cmsfilter\ **Created:** [September 23, 2024, 10:33am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479 "2024-09-23T10:33:18Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Bart](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/bart/32/89_2.png) [@Bart](https://forum.finsweet.com/u/Bart)\ **Post date:** [September 23, 2024, 10:33am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/1 "2024-09-23T10:33:18Z")
Hi on this project: [https://wmb-godandy.webflow.io/](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](https://preview.webflow.com/preview/wmb-godandy?utm_medium=preview_link&utm_source=designer&utm_content=wmb-godandy&preview=cfc4b07917e997420fdee89dc1b81cc8&workflow=preview) Thanks in advance. Very best, Bart ---
**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\ **Post date:** [September 23, 2024, 7:10pm UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/2 "2024-09-23T19:10:36Z")
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. ```js 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! ---
**Author:** ![Bart](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/bart/32/89_2.png) [@Bart](https://forum.finsweet.com/u/Bart)\ **Post date:** [September 24, 2024, 9:35am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/3 "2024-09-24T09:35:21Z")
@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? ---
**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\ **Post date:** [September 24, 2024, 11:48am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/4 "2024-09-24T11:48:03Z")
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! ---
**Author:** ![Bart](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/bart/32/89_2.png) [@Bart](https://forum.finsweet.com/u/Bart)\ **Post date:** [September 25, 2024, 9:32am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/5 "2024-09-25T09:32:25Z")
@Support-Luis Of course! [GoDandy sliders | Loom](https://www.loom.com/share/b64c261e9f1d4c0bb7d64b3c9f6f17e5?sid=a3eb3ab6-930b-4a54-b54f-01e9547fd48e) 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. ---
**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\ **Post date:** [September 25, 2024, 11:33am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/6 "2024-09-25T11:33:29Z")
Hey @Bart! I am not sure what could be happening here 🤔 I moved the script from Slater into the page `` section of the page. Here is a loom: https://www.loom.com/embed/9c1b2257db0f42ec8a8472a5943f3a60 You can see I changed nothing and the slider works as expected ---
**Author:** ![Bart](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/bart/32/89_2.png) [@Bart](https://forum.finsweet.com/u/Bart)\ **Post date:** [September 25, 2024, 11:43am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/7 "2024-09-25T11:43:11Z")
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! 😄 ---
**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\ **Post date:** [September 25, 2024, 11:46am UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/8 "2024-09-25T11:46:29Z")
Correct! Let me know how it goes! ---
**Author:** ![Bart](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/bart/32/89_2.png) [@Bart](https://forum.finsweet.com/u/Bart)\ **Post date:** [September 25, 2024, 2:19pm UTC](https://forum.finsweet.com/t/cms-filter-with-swiperjs-not-working-properly/3479/9 "2024-09-25T14:19:45Z")
It doesn’t fix the issue for me ☹, 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.