Isotope filter with Slick Slider

SOLVE
ben-duchy
Top Contributor

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!

0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Key Advisor | Partner

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!

View solution in original post

7 Replies 7
dennisedson
Community Manager

Heyo @ben-duchy 

Thanks for providing the pen!

Seems like a fun challenge for someone like @piersg .

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes
Kevin-C
Solution
Key Advisor | Partner

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!

View solution in original post

ben-duchy
Top Contributor
Genius! Thanks @Kevin-C that worked perfectly 👍
Kevin-C
Key Advisor | Partner

Unrelated but…

 

FIRST!

Kevin-C_0-1614020913395.png

 

0 Upvotes
dennisedson
Community Manager

If @Kevin-C follows, so do I 😀

Ben_on_CodePen.png

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Kevin-C
Key Advisor | Partner

ben-duchy
Top Contributor

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