Slick: Filter works on slide column not on item when multiple rows are used

[jnhghy]

When using the rows option to display results on multiple rows filtering works at column level instead of working at item level.

https://jsfiddle.net/964mffes/9/

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

Steps to reproduce the problem

Create a slick that displays its items on multiple rows then try to filters the items independently not by column.

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

What is the expected behaviour?

I was expecting the slider to recreate its rows and columns completely after filtering out each item but instead of this the filter is applied at column level which is unexpected for me.

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

More Details

• Which browsers/versions does it happen on?
  Tested on Chrome Windows - but think it happens independent of browser.
• Which jQuery/Slick version are you using?
  Slick - Version: 1.6.0
  jQuery v1.12.4
• Did this work before?
  Nope

[Purecoder]

Using the hide() method may work. I used and worked.

odd.click(function() {
oddEvenSlider.slick( 'slickFilter', function( index ) {
    var $currentSlide = $( this );
    var $slideItem = $currentSlide.find( '.slide-item' );
    $slideItem.each(function(){
    if($(this).hasClass('odd'))
    {$(this).hide();}
    });
        return true;

  });
});

[jnhghy]

Thank you for your time.
Well this code hides the undesired items but doing this breaks the items order, if you check the elements you'll see that the slider adds the items first untill it completes the column required number then goes to next lane so when you filter the items they should all expect maybe the last one have 2 rows per column and decrease the columns number. Hope I make sens.

Thank you and have a nice one

[like-vyk]

+1 Having the same issue.

[reinder42]

What I ended up doing:

• Save the HTML of my slider with .html(), then initialize slick
• When needing to filter (i.e. on filter button click), replace the slider DOM element with the previously saved HTML with .replaceWith()
• Then filter that new DOM element with .filter() as you normally would, removing the elements you don't want to keep with .remove()
• Then initialize slick on the new DOM element

I'm effectively recreating the entire slider with filtered out items. It's ugly, but it works.

(My previous attempt was to simply deinit slick, hide the items I want to filter out, and reinit slick again. This didn't work, because slick will reset row items to display: inline-block.)