How to make a filter in slick if you have rows value 2?

Question

JavaScript

There is a problem, I need to filter the blocks in the slick slider using classes by the button, but when the rows value is 2 in the slick slider, the filter does not work, when I remove the value, everything works. Someone knows how to solve this problem? I will be glad if someone tells me, thanks.

Answer 1

Oh, this is a known bug, which by the way has not yet been fixed. ( https://github.com/kenwheeler/slick/issues/1924 ). You will have to do the filtering manually (follow the link, comment with an implementation example at the end) I do not advise anyone to use this slick, since it is not supported and bugs are fixed for a very long time (last release in October 2017)
For complex sliders with filtering, etc. I advise Swiper ( https://github.com/nolimits4web/swiper )
Implementation example on Swiper:

<section id="portfolio" class="portfolio-slider">
    <div id="portfolio-categories-nav" class="portfolio-categories-nav">
      <button type="button" class="portfolio-categories-nav__item" data-category-id="1">Категория 1</button>
      <button type="button" class="portfolio-categories-nav__item" data-category-id="2">Категория 2</button>
      <button type="button" class="portfolio-categories-nav__item" data-category-id="3">Категория 3</button>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[3]">Название</a>
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[1,3]">Название</a>
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[2]">Название</a>
        <a href="" class="portfolio-slider-slide swiper-slide" data-categories="[2,3]">Название</a>
      </div>
    </div>
    <div class="text-right">
      <button type="button" class="portfolio-slider__prev-btn"><i class="icon-left"></i></button>
      <button type="button" class="portfolio-slider__next-btn"><i class="icon-right"></i></button>
    </div>
  </section>

import Swiper from 'swiper';
function initSwiper(containerSelector) {
  const options = {
    slidesPerView: 2,
    slidesPerColumn: 2,
    slidesPerColumnFill: 'row',
    spaceBetween: 0,
    loop: false,
    autoplay: {
      delay: 8000,
    },
    navigation: {
      nextEl: containerSelector + ' .portfolio-slider__next-btn',
      prevEl: containerSelector + ' .portfolio-slider__prev-btn',
    },
    breakpointsInverse: true,
    breakpoints: {
      768: {
        slidesPerView: 3,
        slidesPerColumn: 2,
      },
      1024: {
        slidesPerView: 4,
        slidesPerColumn: 2,
      },
    },
    threshold: 2,
  };

  return new Swiper(containerSelector + ' .swiper-container', options);
}

function initPortfolio (
  containerSelector = '#portfolio',
  itemsContainerSelector = '#portfolio .portfolio-slider'
) {
  const $categoriesButtons = $categoriesSlickContainer.find(
    '.portfolio-categories-nav__item'
  );
  const $itemsContainer = $(itemsContainerSelector);
  const itemsSwiper = initSwiper(containerSelector);
  const $items = $('.portfolio-slider-slide', containerSelector).clone();

  function activateCategoryButton($button) {
    const categoryId = $button.data('categoryId');
    $categoriesButtons.removeClass('active');
    $button.addClass('active');

    const $newSlides = $items.filter(function() {
      const categories = $(this).data('categories');
      return categories ? categories.indexOf(categoryId) !== -1 : false;
    });

    itemsSwiper.removeAllSlides();
    itemsSwiper.appendSlide($newSlides.toArray());
  }

  if ($categoriesButtons && $categoriesButtons.length) {
    activateCategoryButton($categoriesButtons.first());
    $categoriesButtons.on('click', function() {
      activateCategoryButton($(this));
    });
  }
};

initPortfolio();