slickFilter with 2 rows isnt working.

[ronieldom]

I am trying to create a slider using slick with 2 rows but it seems like making it 2 rows and filtering it via onclick event isnt working and making the items disappear. any fixes for this bug?

Here is the jfiddle. http://jsfiddle.net/xv1ogzkt/

[simeydotme]

Just had a quick look (ps: in future plz dont put minified source in Fiddles :wink: hehe)

It's a pretty large oversight, the filterSlides method completely overlooks the fact there might be rows... the filterSlides method would never work with rows option in it's current implementation.

It's a bit of work, @ronieldom so if it's essential for your project, you should attempt a different solution, or a different framework for now :disappointed: - You could always have 2 carousels, and bind your own custom left/right arrows which progress both carousels simultaneously.

[davidstackio]

I have the same issue. Thanks, @simeydotme for the clear response. For now, I'll look at a different imlpementation.

[apsylone]

@escaped : There's a problem with your patch. The filter works great but the events are unbinds. See http://jsfiddle.net/166caxpj/ for an example with your master branch source.

[apsylone]

Duplicate as #1924

[PawelGIX]

+1

[skrzepij]

Same problem here. After trigger filter in two rows carousel, all items disappear

[egermani]

I'm in that boat too, @skrzepij . But weirdly enough the example which uses ":even" as a filter does work, which makes me wonder if I'm filtering incorrectly. (I'm looking for a data attribute, so I've been trying

$("#grid-wall").slick('slickFilter', "[data-tag='blog']")

[ingmferrer]

@skrzepij @egermani same boat, if you find a solution let me know. I can filter with :even but not with a selector.

[danielgarnier]

Hi @kenwheeler ! Thank you for this amazing carousel !

Do you know any good workaround for using slickFilter with 2 rows?

[artursopelnik]

Hi @danielgarnier. Here is my workaround for that case:

var slider = $('.slider');
var allSlides = $('.slick-slide > div > *').clone();
var trigger = $('button');

trigger.on('click', function() {
    var filterSlides = allSlides.filter('.filter-example');
    slider.slick('unslick').empty().append(filterSlides).slick();
});

[schnoodly]

Trying to do 4 rows - it's a small gallery.

I was thinking, as a workaround for multiple filters and multiple rows, could I just say:

var filtered = false;

$('.filter-agr').click(function(e) {

  $('.gallery-page')[0].slick.refresh();

   if ($("img").not("[alt='agricultural']")){
       $("img").not("[alt='agricultural']").parent().css({'display' :'none','width':'0px'}).parent().css('float', 'left');
     $("img[alt='agricultural']").parent().css('width' , '370px').parent().parent().css('float' , 'left');

       filtered = true;
}else{
       $("img").not("[alt='agricultural']").parent().css({'display' :'block','width':'100%'}).parent().css('float', 'none');
     $("img[alt='agricultural']").parent().removeAttr('style');  
       filtered = false;
}
});

that is to say, refresh/reset the slider upon clicking a filter, and then use (probably redundant) selectors, where I'm choosing images with the "alt" attribute of "not whatever they're trying to see".

from there i just manually insert some css to visually remove the 'wrong' images from the list, then float the rows so they automatically sit beside each other. Then, of course, just reset all those things I change as the else to, again, reset the slider (do i need to do this with slick.refresh()? I just thought about that.)

I could probably go even further, and choose a page where

//select the first slide by the unique attribute

if($("div[aria-describedby='slick-slide00']").filter(function(){ return ($(this).css("display") === "block");}).length < 12){

  //some complex sequence to select the links that display as blocks, .detach() and .append() them to the first page until that page fills up, while retaining rows (or maybe not?).

//note: I would probably recommend nesting that sequence inside of an **if** statement that makes sure you aren't selecting the clones, just in case. class for them is ".slide-cloned"
}

codepen link: https://codepen.io/schnoodly/pen/dRzzBm

But it's an incredibly roundabout and clunky way of doing things (along with the fact I only have a few months' experience under my belt), and the largest clientside downfall is that the images stay in their separate pages.

If anyone has anymore pointers, I would love to hear them. Hopefully this helps someone.

[nyanginator]

I've recently run into this problem, and can't find any other thread except this one and https://github.com/kenwheeler/slick/issues/1924.

I seem to be having success with @escaped's patch, although I haven't thoroughly tested many case scenarios.

@apsylone, can you elaborate on what is wrong with this patch?

Any word on official support for this problem?

[Slluxx]

still an issue

[mariovalney]

I run into this problem today and created a jQuery plugin to handle this case. Maybe can help someone until filter support grid mode:

https://gist.github.com/mariovalney/b6e56f061698031f1684edee43a2dc1e

[JackyHuang700]

我今天遇到了這個問題，並創建了一個jQuery插件來處理這種情況。 也許可以幫助某人，直到過濾器支持網格模式：

https://gist.github.com/mariovalney/b6e56f061698031f1684edee43a2dc1e

Help me a lot, Thank you :DD