Как правильно использовать slickFilter?

Question

[Егор Лавренов]

Вот такая структура


Вот такой код



Почему-то работает только когда нажимаю на кнопку "Все". На остальных кнопках исчезают все элементы из слайдера
В чем может быть проблема?

Comments

[ой всё]

как вы только глаза себе еще не сломали такой новогодней расцветкой

вы так на скриншотах отладку и проводите?

[Егор Лавренов]

ой всё, вот скинул кодом, если расцветка вам неудобна

/*Plane-slider*/
  var PlaneSlider = $('.plane-slider').slick({
    infinite: false,
  });

  /*Plane-filter*/
  $('.slider-menu span').click(function(event) {
        /*Находим слайды*/
    var slides = $(this).closest('.content').find('.plane-slider').find('.plane-slider__slide'),
        attr = $(this).attr('data-search'); /*Находим дата атрибут айтема меню*/

    /*При клике на меню добавляем нужному класс актив*/
    $('.slider-menu span').removeClass('active');
    $(this).addClass('active');
    
    /*Если это пункт все, показываем все*/
    if (attr == 'all') {
      PlaneSlider.slick('slickUnfilter');
      slides.addClass('visible-slide');
      return false;
    }

    /*Всем слайдерам удаляем класс видимости*/
    slides.removeClass('visible-slide');
    /*Убираем фильтрацию*/
    PlaneSlider.slick('slickUnfilter');

    /*Находим слайды с нужные слайды*/
    var SlidesToShow = slides.not(function(){
      if ($(this).attr('data-search') != attr) {
        return true;
      }
    });
    console.log(SlidesToShow);
    /*Добавляем нужным слайдам класс visible*/
    SlidesToShow.addClass('visible-slide');
    /*Фильтруем*/
    PlaneSlider.slick('slickFilter', '.visible-slides');

  });

[ой всё]

Егор Лавренов, не я на рунах не гадаю и в чужом коде не копаюсь

Answer 1

[palegrow]

Надо через функцию, так как фильтр применяется к сгенерированной обертке

function filterSlider(filter) {
    $('.good-offer__slider').slick('slickUnfilter');
    $('.good-offer__slider').slick('slickFilter', function() {
      return $('[data-filter="'+filter+'"]', this).length === 1;
    });
  }