Unable to make the Slider app work with an advanced CMS filter

Finsweet Components Slider
,
1

Hi there, i’m having troubles using the slider app with CMS filter for my particular use case where im populating the CMS with an external API, and for any CMS item thats a result of a filtering option, the slider isnt working

Here’s my read-only: Webflow - Realtor project

Here’s my staging
https://realtor-dev.webflow.io/listing

2

Hey @gabriel.babus! For the specific use case with CMS Filter we can try fixing it by restarting the Slider component each time items are rendered, this means if we load them with CMS Load or after a filter action by the user.

This is the code that should handle this. Can you test and let me know if this addresses the issue?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsComponents = window.fsComponents || [];

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

      const [filterInstance] = filterInstances;

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        window.fsComponents.solutions.slider.restart();
      });
    },
  ]);
</script>
3

It seems it worked like a charm, thanks @Support-Luis

One more question, if I may

It might sound a bit stupid, but i’m using the slider app to create like an airbnb type slider, and the slider is inside a collection, pulling images from the multi-reference CMS field

I want to make it so that if you click on the image, it’s a link to the CMS page, but unfortunately i cannot do that natively, so what I tried is to use the Finsweet attribute for mirror click, so that when you click on the image, it clicks on the link block inside the CMS item that opens the page

Unfortunately, the problem is that by using this method, it always opens the same page, as the mirrorring happens on the same link, for some reason

I hope I make sense!

Is there a way i could specify that the mirror should be on the closest “target” thats inside the CMS item?

Thanks!

4

Hey @Support-Luis side note, separate from my last question

I just realized the slider app is currently, out of nowhere, causing layout breaks (huge layout breaks) and im not sure why. It overflows the page entirely

Can you have a look?

https://realtor-dev.webflow.io/listing

5

Is there a way i could specify that the mirror should be on the closest “target” thats inside the CMS item?

Natively, this would be possible by defining trigger and target instances, which will require manual work as you’ll need to define a trigger and target for all images as I see the nested collection does not allow dynamic attributes.

However, we can achieve this:

Is there a way i could specify that the mirror should be on the closest “target” that’s inside the CMS item?

By custom coding the solution, which is not that hard; as long as you have an element in each item with the slug to each item’s page, we detect the click on the image and redirect the user to the URL.

I hope this makes sense haha we can jump on a call if needed and build the structure.

6

Can you have a look?

Sure! But I see the slider has been hidden for now, could you create a test page where I can see the slider breaking the layout?

7

I have readded the slider back - it’s visible

As for the mirror click thing, I’d love to hop on a quick call. How should we do that?

8

@Support-Luis any chance you could have a look soon? I gotta share a preview with a client asap :smile:

9

I sent you a DM!