Pop Up Slider Triggered by Multiple 'Filtered' Lists

Hey,

Wondered if you can point me in the right direction, Im looking to create a pop up slider that pulls in content from filtered collection lists.

Im hoping to have:

1: Multiple collection lists on a page - they use the same CMS collection but with different filters set for each one.

2: The filtered collection item triggers a pop up ‘Slider’ the ‘Slide’ contains matching cms content to the item trigger.

3: When the pop up slider is open you can continue to slide through the entire CMS collection unfiltered.

I had used this (https://cms-lightbox-fin-sweet.webflow.io/) as a starting point - which worked great until i applied filters to the collection list / added multiple lists.

This combo looks close to the solution im after but unsure how to match and pull additional cms content into the slider.

Heres my share only.
https://preview.webflow.com/preview/3advance?utm_medium=preview_link&utm_source=designer&utm_content=3advance&preview=903560fa3e7a0f92b7d3626d67a86dc6&pageId=6405be8efb6470774cb86d3c&workflow=preview

Heres the live version with the custom code running but not matching the CMS content in the slider:
https://3advance.webflow.io/expertise

Hope you can help with this!

Thanks
Kieran
Designer not a Developer

Hey @kieranholden! I see you have the CMS Library code to generate the slider as well as the Attributes script on your page, I recommend you stick to the Attributes solution, documentation here.

From what I understand the slider will only show the complete collection, so you can have the same setup as the combo example you showed above with several triggers for the same target.

Thanks @Support-Luis - that’s great !

Ive setup a new page just using attributes based on this combo + the CMS slider and removed the custom script i had:

The slider is connected nicely to the same collection - But i still cant seem to get the mirror click on the slider nav working so the slider matches up to the collection item that triggers it.

Any chance you could take a look - appreciate it!

https://preview.webflow.com/preview/3advance?utm_medium=preview_link&utm_source=designer&utm_content=3advance&preview=903560fa3e7a0f92b7d3626d67a86dc6&pageId=645b5b249de175eed31e7d80&workflow=preview

https://3advance.webflow.io/expertise-final-fix

Thanks :pray:
Kieran

You will need to create triggers and targets with the CMS Attribute option.

You can unhide the .fs_cmsattribute_settings div and take a look at the settings on the clonable.

@Support-Luis Cant thank you enough for the support on this. I dialed it back and just rebuilt from scratch. Working Great!

https://3advance.webflow.io/expertise#design

Will share the finished site when we go live! :pray: :mirror_ball:

K

Looking great @kieranholden! Great work :muscle:

1 Like