<div class="slider">
$('.slick').slick({
Так как правильно - slider или slick? Вы бы определились.
data-category="orange"
var filterClass = $(this).data('category');
$('.slick').slick('slickFilter', filterClass);
Где-то тут точки не хватает - имена классов, они точкой в начале обозначаются.
А ещё сброс фильтра (пункт "all color") работать не будет - это надо отдельно обрабатывать:
$('.category__menu').on('click', 'li', function() {
$('.slider').slick('slickUnfilter');
const category = $(this).data('category');
if (category !== 'allPost') {
$('.slider').slick('slickFilter', `.${category}`);
}
});
