Slick Filter/Unfilter not working properly.

[Jorenm]

Slick Filter is behaving erratically. Filtering on a class doesn't seem to work at all. Filtering on a :odd/:even pseudo selector works, but won't unfilter.

====================================================================

http://jsfiddle.net/j3271fs9/5/

====================================================================

1. Click "Odd Filter Me"
2. Click "Unfilter Me"
3. Note it doesn't unfilter.

Alternately

1. Click "Filter me".
2. Note it shows no slides.
3. Click "Unfilter Me". Unfilters and shows slides, but does move slider to last element (related to https://github.com/kenwheeler/slick/issues/3090 ?)

[apsolut]

Could help, example with latest slickjs with filters: https://codepen.io/apsolut/pen/LyPmEL

[Jorenm]

Is mine not using the latest slick? I used the jsfiddle link in the new issue template. Looks like it's 1.8.1?

It's odd that yours is working and mine is not. Do you see anything wrong in mine? Seems pretty basic config wise and seems to match the docs.

[nyanginator]

I'm also stuck with a seemingly-related issue. Mine seems related to having the "responsive" setting. Strangely, when I copy-paste all the code to Codepen, it works fine. But in jsfiddle, it doesn't work.

UPDATE: The reason Codepen worked and jsfiddle didn't is because I was using the minified slick.min.js file, which seems to match the old 1.8.0 version. If I change the Codepen to use the regular slick.js (1.8.1), it no longer works.

In my local tests, it seems that having _.options.rows > 0 instead of > 1 (at least in the cleanupRows function) is a mistake. See https://github.com/kenwheeler/slick/pull/3001.

====================================================================

http://jsfiddle.net/fmo50w7n/1437/ (not working the way I expect)

https://codepen.io/anon/pen/ZXMgXm (works fine, using slick.min.js -- looks to be the 1.8.0 version)

https://codepen.io/anon/pen/qPMeoE (not working fine using slick.js -- the 1.8.1 version)

====================================================================

Make sure you are in the breakpoint range (width < 1200px).

====================================================================

Note that the only difference between the 2 sliders is the "responsive" section. Both sliders are initialized, and both have the same filter applied to them. Then "slickUnfilter" is applied to each. I expect both sliders to have all slides 6 slides showing again.

====================================================================

Only the bottom slider (the one without responsive setting) is showing 6 slides. The first slider is only showing the slides that were not previously filtered out

==================================================================== I only have FF and Chrome installed right now, and it happens on both. Latest slick (1.8.1) and jQuery (3.2.1).

Since the minified slick.min.js seems to work (and it looks like this minified slick.min.js is still on the 1.8.0 version), I'd say that this is something that used to work in 1.8.0 ...

[Laslo89]

Came across the same issue. After I imported the minified version it works ...

[ahmadalfy]

Perhaps it is not clear in the documentation but the filter uses jQuery filter. jQuery filter either accept a selector or a function. The selector is applied to the slide's wrapper that is created by slick and doesn't have any class. This is why passing a class doesn't work. To make it work you actually need to pass a function that search for that class like the following:

$('.items').slick('slickFilter', function() { return $('your-css-selector', this).length === 1; });

The problem is that this doesn't work with the rows option because it search in the slide (which consist of the rows) so the filter won't work. I am still trying to think how to do it in the filter.

[Jorenm]

Thanks to your insight I was able to get it to filter on class using ':has(.my-selector)', but slickUnFilter still doesn't seem to work properly.

[jacobcarrington]

I'm having the same issue in that the slickUnFilter does not seem to work. The behaviour I'm seeing is that on un-filtering, slick restores the opposite of what was visible. running it again will remove the remaining items, leaving the carousel empty.

After some extensive debugging I found that:

• slick caches the slides.
• the 'unfilterSlides' method uses $.detach to remove the remain items from the slide track. Then uses the cached slides to restore the slider to it's original state.
• The behaviour witness seems to indicate that $.detach is also effecting the cached slides.

I updated the filter / unfilter methods to:

• use $.clone(true, true) to make a deep copy of all the slides as a cache.
• replace $.detach for $.remove();

Whilst almost certainly more expensive, this solves the issue. Whether the issue is with changes to jQuery or not, i'm uncertain.

[davidd647]

I was having the same problem - so I made a codepen! Figured out how to filter \<li> elements with a specific class out of a slick carousel! I thought this might be a helpful demonstration of how to filter the things.

https://codepen.io/d2dev/pen/jzbyJO

Explanation/Eureka thing: The problem I was having was that I started with a filter of ':has(.filter-me)' - and that didn't work the way I expected. I expected it to remove the \<li class="filter-me"> from the \<ul>. So, I did what I usually do - divide the thing up, and figure out what each of the pieces do... But that didn't help! That's because I thought that the filter argument was supposed to filter things out. It turns out this argument is what you want left in the UL after the filter! So I wrapped the above argument in a ':not()' pseudo-selector, making it ':not(:has(.filter-me))'.

5/5 would program it again.

[jacobcarrington]

@davidd647 I don't think this is the same issue. The filter slick uses is simply jQuery's filter function (http://api.jquery.com/filter/).

What we are saying here is that in our case, we were unable to remove the filter afterwards using the slicks 'slickUnFilter' method.

[davidd647]

Thanks @jacobcarrington ! I saw that the original fiddle wasn't filtering at all - it was just destroying the slick entirely, and thought it would help.

But anyways, I fixed up the code so that it unfilters. I think an important thing to keep in mind with the unfilter is that you can't double-filter or double-unfilter. You can set up a boolean to keep track of whether to filter or unfilter.

[VincentCharpentier]

you can't double-filter or double-unfilter. You can set up a boolean to keep track of whether to filter or unfilter.

This seems odd to me. Shouldn't this be handled by slick ?

[umbalem]

Is there any update on this issue or any workarounds?

I tried the following as suggested by jacobcarrington, but it didn't work for me.

• use $.clone(true, true) to make a deep copy of all the slides as a cache.
  • replace $.detach for $.remove();

Thanks!

[apsolut]

hi @umbalem , didn't have time to play too much but try does this work for you: https://codepen.io/apsolut/full/mzmrWo/ , its from @ahmadalfy example, it should be okay with normal usage

[umbalem]

@apsolut

Thanks! I am doing something similar to that.. but I need nested queries based on a group of buttons clicked. I will have to look at how my keys are getting generated.

I am doing something like

slider.filter(group1key) slider.filter(group2key)

pressing a button in group 1 then 2 then 1 then unslick will only items from the first button press are left, and the original list is gone.

[umbalem]

I've created a code pen for the issue. If you select white, then creature, then blue. Only white items remain.

codepen

Basically i need to be able to filter by each group. (white or blue or black) AND (creature or instant or sorcery) AND (group...) AND (group...)

The attribute selector doesn't seem to have a way to apply order of operations, so I would have to generate one for each button combination...

Easiest way is to just call the filter on each group, but it doesn't seem to maintain the original list.

[umbalem]

I think i figured it out :P i can to the AND comparisons as a function. $('.cardList-slider').slick('slickFilter', function () { return $(colorFilterString, this).length === 1 && $(typeFilterString, this).length === 1 && $(rarityFilterString, this).length === 1; });

[stuartjnelson]

I was having this issue. I tried a few different versions of slick (1.5.0, 1.8.0, 1.8.1) and none of them worked. I create a Codepen using 1.8.0 from this CDN and it worked... So I have no idea how the CDN is using a different version that the NPM package but it works!

[jacobcarrington]

Hi guys,

I cleaned up the pen to make it a little easier to follow: https://codepen.io/jacob-carrington/pen/QZPypG

Slicks filter capacity is only limited by what you can do with jquery's .filter as that is pretty much all it is. What slick trips up on as it can never restore the origin slider when doing consecutive filters.

I've done my best to port my es6 filterHandler function into this example. You can see when i do $slickCache = slick.$slides.clone(true, true); I'm taking my own copy of the carousel to restore from. I don't use slickUnfilter as it will never work for the reasons I have previously stated.

If you wanted to make this filter multiple tags, it would be easy enough to adapt this function as I have in the past. Just uses checkboxes, not buttons, change the on click to collect the values, update var query and slick.filterSlides callback accordingly.

[joeRob2468]

I was having this issue. I tried a few different versions of slick (1.5.0, 1.8.0, 1.8.1) and none of them worked. I create a Codepen using 1.8.0 from this CDN and it worked... So I have no idea how the CDN is using a different version that the NPM package but it works!

OK, I tried the other solutions, and this is the only one that worked for me. No clue why.

[stewartknapman]

I'm seeing this issue in version 1.9.0 but only if I pass responsive settings with the initialise options and only when it's below the breakpoint in those settings.

[meandillar]

@stewartknapman I had the same issue on versions 1.8.0, 1.8.1 and 1.9.0 and only when I pass responsive settings. The only way I got it to work was to avoid passing in the responsive setting and handle breakpoint changes in a 'setPosition' event.

[sixty7ss]

@stewartknapman I had the same issue on versions 1.8.0, 1.8.1 and 1.9.0 and only when I pass responsive settings. The only way I got it to work was to avoid passing in the responsive setting and handle breakpoint changes in a 'setPosition' event.

@stewartknapman Could you please share an example of how you used 'setPosition' to breakpoint changes? I'm in the same boat.

[MattPurland]

For those who are still having this issue, it may be because you're using NPM for the library (which is out of date, at 1.8.1). Use the git URL to get 1.9.0, where everything works fine:

"slick-carousel": "git+https://github.com/kenwheeler/slick.git"

[kazabubu21]

still have this issue on responsive mode. if i do "Unfilter" twice all slides disappear. (using 1.9.0)

[firestar300]

Same problem as @kazabubu21

[boerge]

Same problem as @kazabubu21 and @firestar300! After clicking Unfilter twice -> all slides disappear...

[pcook2]

@kazabubu21 Same problem for me.

[richard4222]

Hello, first of all great post, it allowed me to make good progress on the filters of my slider. I have a small question, in my case I use the filter to display photos for dark mode or light mode. By default the site being in light mode is it possible to put a filter by default? in my case "light". Thanks

[victorchat]

As @stuartjnelson said, the NPM version behaves in a different way.

In my case: jQuery 3.5.1 (NPM and CDN) slick 1.8.1 (NPM and CDN)

First problem: slick can't find the css selector used for filtering. If you pass a class as a second parameter to the slickFilter method, the CDN version works but the NPM one does not. The problem is the wrapper slick adds to the slides. The NPM one does not contain the class used for the filtering. The NPM one creates a new div and wraps the slide around. The CDN one creates a new div and merges the attributes with the slide root.

Second problem: every filter is incremental. If you apply one filter on top of another it is not possible to go back to the first set of slides. That can be resolved calling slickUnfilter before applying a new filter.

I created a simple pen with a working example: https://codepen.io/victorchat/pen/GRMPNLY

I hope this helps.

[illi-homz]

Простите что по русски. В общем проблема позникает при использовании адаптивности слайдера. Ее можно решить если вместо 'responsive' использовать 'setPosition' Например:

init() {
    this.initSlider(this.getSliderOptions());
},
initSlider(options = {}) {
    $('._services__slider')
        .slick({
            ...options,
            infinite: true,
            prevArrow: `<div class="prev-arrow slider-arrow">${arrow}</div>`,
            nextArrow: `<div class="next-arrow slider-arrow">${arrow}</div>`,
        })
        .on('setPosition', () => {
            const options = this.getSliderOptions();
            $('._services__slider').slick('slickSetOption', options);
        });
},
getSliderOptions() {
    const viewport_width = window.innerWidth;

    if (viewport_width > 993) {
        return {
            slidesToShow: 6,
            slidesToScroll: 6,
            arrows: true,
        };
    } else if (viewport_width > 768) {
        return {
            slidesToShow: 4,
            slidesToScroll: 4,
            arrows: true,
        };
    } else if (viewport_width > 480) {
        return {
            slidesToShow: 3,
            slidesToScroll: 3,
            arrows: false,
        };
    } else {
        return {
            slidesToShow: 2,
            slidesToScroll: 2,
            arrows: false,
        };
    }
},

[CyrilLeblanc]

@victorchat

the CDN version works but the NPM one does not

Do you know which CDN you used at this time ? I can't find a way to reproduce. Maybe I used a wrong one ?

I'm facing the same issue but I think the problem may be from the jQuery version. Before upgrading jQuery from 1.7 to 3.6 I had no div wrapping behavior. I didn't change slick version btw.

[victorchat]

@CyrilLeblanc

I mentioned on my response. I used: In my case:

jQuery 3.5.1 (NPM and CDN) slick 1.8.1 (NPM and CDN)

The whole problem was caused by the same version from different sources.

I haven't tried other versions so I can't really tell about that.