Как сделать фильтр в slick если у тебя стоит значение rows 2?

Question

[Pit]

Есть проблема, мне нужно по кнопка отфильтровывать блоки в слайдере slick с помощью классов, но когда стоит значение rows 2 в slick слайдере то фильтр не работает, когда значение убираю то все работает. Кто-то знает как решить данную задачку? буду рад если кто подскажет, спасибо.

Comments

[Антон]

Размести в песочнице код, попробуем разобраться.

[Шохрух Шаймардонов]

Pit, на будущее, сразу начните вопрос с совета Антон

Answer 1

[Салават Салахутдинов]

Оо, это известный баг, который кстати до сих пор не пофиксили. (https://github.com/kenwheeler/slick/issues/1924). Придется вручную делать фильтрацию (перейдите по ссылке, в конце комментарий с примером реализации) Никому не советую использовать этот slick, так как он не поддерживается и баги очень долго фиксят (последний релиз в октябре 2017)
Для сложных слайдеров с фильтрацией и т.д советую Swiper (https://github.com/nolimits4web/swiper)
Пример реализации на 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();

Comments

[Pit]

какой слайдер посоветуете с таким решение фильтра с 2 рядами блоков ?

[Салават Салахутдинов]

Pit, Swiper (https://github.com/nolimits4web/swiper)

[Pit]

Салават Салахутдинов, что то я там функции фильтра не замечал в демо версии

[Салават Салахутдинов]

Pit, Фильтрацию все равно придется вручную, пример вам прикрепил

[Pit]

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

[Салават Салахутдинов]

Pit, Это взято из реального проекта, так что должно работать) А так, всегда пожалуйста