Isotope filter with Slick Slider

[ben-duchy]

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!

[Kevin-C]

Unrelated but…

FIRST!

[dennisedson]

If @Kevin-C follows, so do I 😀

 

[ben-duchy]

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

[Kevin-C · Accepted solution]

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!

[ben-duchy]

Genius! Thanks @Kevin-C that worked perfectly 👍

[dennisedson]

Heyo @ben-duchy 

Thanks for providing the pen!

Seems like a fun challenge for someone like @piersg .