Filter a Slick carousel when using grid mode (rows).

jquery-slick-filterable.js

(function( $ ) {
    $.fn.slickFilterable = function( options ) {

        /**
         * A plugin to create a slick we can filter.
         *
         * If you are not using Rows you can use slickFilter
         * (check documentation) otherwise we can provide a valid filter.
         *
         * options {
         *      slideSelector    string     jQuery selector to get slides. Imetiate children by default.
         *      filterName       string     We will search for data-{filterName} clickable elements.
         *      slick            object     The slick settings. Check Slick doc.
         *      beforeFilter     function   A fuction called before filter slider. Receives the trigger element
         *                                  as this and 3 params: category (string), slider and slides (jQuery objects).
         *      filter           mix        A valid parameter to jQuery filter() function. If it's a functio we will wrap
         *                                  it and it receives the trigger element as this and 3 params: category (string),
         *                                  slider (jQuery object) and a copy of settings (extended).
         * }
         */
        var settings = $.extend({
            slideSelector: '> *',
            filterName: 'filter-slick',
            slick: {},
            beforeFilter: function() {},
            filter: function( element, category, slider, settings ) { return true; },
        }, options );

        return this.each(function() {
            var slider = $(this),
                slides = slider.find( settings.slideSelector ),
                slickObj;

            /**
             * Create Slick
             *
             * TIP: you should you 'slidesPerRow' instead 'slidesToShow' in grid mode (with rows)
             * to avoid slick break layout when there are less slides than on "page".
             */
            slickObj = slider.slick( settings.slick );

            // Handle Filter Click
            $('[data-' + settings.filterName + ']').on('click', function(event) {
                event.preventDefault();

                var category = $(this).data(settings.filterName),
                    newSlides = $.extend(true, {}, slides),
                    newSlickOptions;

                if ( ! category ) return;

                // Before Filter Slides
                if ( typeof settings.beforeFilter == 'function' ) {
                    settings.beforeFilter.call(this, category, slider, slides);
                }

                // Destroy and empty
                slider.slick('unslick');

                // Recreate All Slides
                if ( category === 'all' ) {
                    slider.find( settings.slideSelector ).remove();
                    slider.append( newSlides );
                    slider.slick( settings.slick );

                    return;
                }

                /**
                 * Filter Slides
                 *
                 * If settings.filter is a function we pass the category, slider and a copy of settings
                 * expecting a true or false return to pass it to jQuery.filter();
                 *
                 * If not, we just pass it directly.
                 */
                if ( typeof settings.filter !== 'function' ) {
                    newSlides = newSlides.filter( settings.filter );
                } else {
                    newSlides = newSlides.filter( function() {
                        return settings.filter.call( this, category, slider, $.extend( true, {}, settings ) );
                    } );
                }

                slider.find( settings.slideSelector ).remove();
                slider.append( newSlides );
                slider.slick( settings.slick );
            });
        });
    };
}(jQuery));

A working example: https://jsfiddle.net/mariovalney/L8b2d0ox

This is a plugin to simple cases.
Do not tested against add/remove features.

EDIT: improved example

Looks promising and working, thanks a lot for Your work.
Im trying to use Your example but instead of searching by tags (h1/h2 etc etc) like You:
var tag = $(this).children()[0].tagName;
I would like to search by title or data-name of a children.
So i was thinking that this:
var category = $(this).children().attr('title');
going to be work but unfortunately it's not.
Could You help me out ?

There is a syntax error on your code (a missing ' after title).

Anyway, I improved the example to use classes.
Can you check? Maybe it can help you.

Wow man, You are amazing, thank You so much, finally someone who found out how to deal with filtering rows in slick slider.
Thanks a lot Mario - You save my day.

@mariovalney Thank you man for your work))
Everything works perfectly.

@mariovalney Thank you for your work !
I have a question, can this plugin do multiple filter, like on your example, a button that filter by category-1 and gategory-2 ?

Yes.

If settings.filter is a function we pass the category, slider and a copy of settings expecting a true or false return.
This way you can check, for example, a attribute with two categories.

Or you can change the implementation to allow multiple filters, for example, checking the class of a filter (as active or something like that).

Can we use this filter function for 2 different slider on a same page as i am using this function and if I select one filter it's effect reflect on both the slider

Sure. But you should use different filters: https://jsfiddle.net/te9rw2mf/3/

Thanks for the help mario valney it's working now

You save my .... Thank you very much ( there is small issue with slick, when vertical mode is used, so I just turn on fade effect and it looks perfect :) )