-
-
Save mariovalney/b6e56f061698031f1684edee43a2dc1e to your computer and use it in GitHub Desktop.
(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)); |
@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 :) )
@mariovalney Thank you man for your work))
Everything works perfectly.