topic Re: Isotope filter with Slick Slider in CMS Development

Isotope filter with Slick Slider

ben-duchy — Fri, 19 Feb 2021 14:47:31 GMT

A bit of a long shot, but I'm hoping someone has the technical knowhow to come to the rescue.

I'm building a new module that uses data from HubDB. To filter this data I'm using the Isotope JS library in a select list. Then to display the information I'm using a Slick Slider carousel. On the face of it, it works as it should, however when you make a new selection from the select list, it only updates one box and not the title / plot above it.

I have created a demo on codepen to help demonstrate the issue.

https://codepen.io/ben-spriggs/pen/ZEBydgM

You’ll see that when you drag the main box across (bottom), it does change the plot number above which works as it should. However, upon changing the site in the select list, only the main slider (bottom) info changes and not the plot / site above it.

I assume it requires some custom JS code but I just don't know it!

Re: Isotope filter with Slick Slider

dennisedson — Mon, 22 Feb 2021 17:00:23 GMT

Heyo @ben-duchy

Thanks for providing the pen!

Seems like a fun challenge for someone like @piersg .

Re: Isotope filter with Slick Slider

Kevin-C — Mon, 22 Feb 2021 18:10:55 GMT

Hey @ben-duchy

So I think you might have just missed a minor detail!

When you're applying your filters you should also filter the .pno slider:

… $('.slick, .pno').slick('slickUnfilter'); $('.slick, .pno').slick('slickFilter', filterClass); …

Using multiple selectors separated by commas is how jQuery allows you to use methods on multiple objects!

Hope this gets ya going!

Re: Isotope filter with Slick Slider

Kevin-C — Mon, 22 Feb 2021 19:09:02 GMT

Unrelated but…

FIRST!

Re: Isotope filter with Slick Slider

ben-duchy — Mon, 22 Feb 2021 19:09:14 GMT

Genius! Thanks @Kevin-C that worked perfectly 👍

Re: Isotope filter with Slick Slider

dennisedson — Mon, 22 Feb 2021 19:11:39 GMT

If @Kevin-C follows, so do I 😀

Re: Isotope filter with Slick Slider

Kevin-C — Mon, 22 Feb 2021 19:15:00 GMT

Re: Isotope filter with Slick Slider

ben-duchy — Mon, 22 Feb 2021 19:20:12 GMT

Thanks @Kevin-C , @dennisedson - I'll do the same back 😀