@pit6262
Верстальщик

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

Есть проблема, мне нужно по кнопка отфильтровывать блоки в слайдере slick с помощью классов, но когда стоит значение rows 2 в slick слайдере то фильтр не работает, когда значение убираю то все работает. Кто-то знает как решить данную задачку? буду рад если кто подскажет, спасибо.
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
Jackardios
@Jackardios
Фронтенд разработчик
Оо, это известный баг, который кстати до сих пор не пофиксили. (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();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
NetLab Москва
от 35 000 до 50 000 руб.
Legalbet Саратов
от 50 000 руб.
Римэкс Екатеринбург
от 70 000 руб.
06 дек. 2019, в 17:44
5000 руб./за проект
06 дек. 2019, в 17:41
1500 руб./за проект
06 дек. 2019, в 17:10
3000 руб./за проект