Slick: Bug with filtering on responsive

[pauliusg]

Hi,

I have the same issue as in https://github.com/kenwheeler/slick/issues/1402 which was closed and not resolved.

Link to code with issue: http://codepen.io/anon/pen/ZbYQWz?editors=101

Steps to replicate issue:

1. You have to load a code in one breakpoint
2. Use slickFilter
3. Then change breakpoint
4. Use slickFilter again (only elements from last filter are passed instead of all elements

Video how to replicate the issue: http://screencast-o-matic.com/watch/coQejcfEhk

[VaclovasV]

+1

[mantas-kunsmanas]

+1

[kestas-devbridge]

+1

[ginsev]

+1

[ghost]

+1

[linasmatakas]

+1

[ktkaushik]

+1

[kenwheeler]

This will be fixed soon

[tsbilguun7167]

Hello. Sorry for bad english. I really cant understand this issue.

1. You have to load a code in one breakpoint
2. Use slickFilter
3. Then change breakpoint
4. Use slickFilter again (only elements from last filter are passed instead of all elements

1 and 3 sentences cant understand help me @pauliusg

[kenwheeler]

It is basically saying that the original elements are lost after a breakpoint change.

[tsbilguun7167]

    var filtered = false;
    $('.product-button').on('click', function () {
var filtername = $(this).attr('id');
var currentclass = $(this).attr('class');
if (filtered === false) {
    $('.product-carousel').slick('slickUnfilter');
    $('.product-carousel').slick('slickFilter', '.filter-' + filtername);
    $(this).attr('class', filtername + ' product-button');
} else {
    $('.product-carousel').slick('slickUnfilter');
    $('.product-carousel').slick('slickFilter', '.filter-' + filtername);
    $('.product-carousel').slickGoTo(0);
    $(this).attr('class', filtername + ' product-button');
    filtered = false;
}

});
What should i change here? Sorry for asking bad things.

[kenwheeler]

It's not your code, I need to fix it.

[tsbilguun7167]

Okay thank you for attention. I will try :)

[kenwheeler]

If you wanna give it a shot, look at the filter method where the current slides get saved. You'll want to store them on the instance, rather than on the mutable current options object.

[tomsarduy]

Still an issue :/

[microcipcip]

+1

[kenwheeler]

Working on it

[bblaha]

+1

[slr1979]

Any update on this @kenwheeler ?

[BenMGilman]

+1

[slr1979]

Sorry, but even after updating to 1.5.8 I am still having issues when using slick filter with breakpoints. Fine when not in breakpoints. See https://github.com/kenwheeler/slick/issues/1701#issuecomment-138279616 for my current code.

[kenwheeler]

@slr1979 The fix is on master, it will be released in 1.5.9. You can grab slick.js right off of github and the fix is there.

[slr1979]

@kenwheeler Sorry, admittedly I was using slick.min.js. However, even using the master slick.js did not resolve the issue. In fact the filter has stopped working even when not within a breakpoint? It's like it does not reinitialise when I click another filter?

[kenwheeler]

@slr1979 are you not unfiltering before filtering again?

[slr1979]

@kenwheeler.....if you are referring to ''slickUnfilter'' I don't think I am actually. I didn't think of that as it worked without it outside the breakpoints. Would you be able to advise me on how I would use ''slickUnfilter'' in my existing click code?

var $optionSets = $('#filters'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function() { var $this = $(this); if ($this.hasClass('selected')) { return false; } var $optionSet = $this.parents('#filters'); $optionSets.find('.selected').removeClass('selected'); $this.addClass('selected'); var selector = $(this).attr('data-filter'); container_slick.slick('slickFilter', selector); return false; });

My apologies for being a bit thick.

[kenwheeler]

You could just call container_slick.slick('slickUnfilter'); right before you call filter.

[slr1979]

Bingo! All fixed in conjunction with updated slick.js. No problems with breakpoints now either. Thanks so much @kenwheeler

[kenwheeler]

anytime! @slr1979