Вот HTML-код для скользящего слайдера:

<div class="slick">
    <div class="black phone"></div>
    <div class="white phone"></div>
    <div class="green phone"></div>
    <div class="black ipad"></div>
    <div class="white ipad"></div>
    <div class="green ipad"></div>
    <div class="black tablet"></div>
    <div class="white tablet"></div>
    <div class="green tablet"></div>
</div>

Мне нужно отфильтровать по цвету (черный, белый, зеленый) и устройству (телефон, ipad, планшет). Так, например, нужно фильтровать по имени класса .white и .tablet. Формат фильтра: «цвет» и «устройство». Это динамично, а не статично. Пожалуйста, посоветуйте мне. Любая помощь будет оценена. Благодарю.

2
saburo 12 Дек 2016 в 18:31

3 ответа

Лучший ответ

Это невозможно. Слайдер Slick не поддерживает такую фильтрацию.

-1
saburo 7 Янв 2017 в 12:25

Это на самом деле довольно просто.

Поскольку slick просто использует jquery .filter() http://api.jquery.com/filter/, вы можете использовать несколько селекторов классов в одной строке. Просто присоединяйтесь к классам, которые вы хотите оставить с запятой.

     let slidesToKeep = ['.green.tablet', '.green.phone', '.ipad'].join(',');
     // slidesToKeep now equals '.green.tablet,.green.phone,.ipad'
     $('.slick').slick('slickFilter', slidesToKeep);

Я создал демонстрацию codepen, поэтому вы можете добавить столько фильтров, сколько захотите: Несколько фильтров Slick Carousel демо.

Изменить для текстовых ссылок

Довольно просто использовать текстовые ссылки, а не блоки выбора. Вы можете просто использовать прослушиватель кликов по текстовой ссылке.

Добавьте текст так:

<span class="color-filter" data-value=".black">black</span>
<span class="color-filter" data-value=".white">white</span>
<span class="color-filter" data-value=".green">green</span>

Слушатель кликов:

$('form.filter span').on('click', function() {
    var filterClass = $(this).data('value')
    $('.slick').slick('slickUnfilter')
    $('.slick').slick('slickFilter', filterClass)
});

Я разветвил оригинальную ручку кода, чтобы показать, что она работает ... https://codepen.io/timrross/pen / JxyVjE

3
Tim 5 Фев 2019 в 14:51

С помощью скользящего слайдера можно отфильтровать несколько условий. Вам нужно отфильтровать все ваши условия в одном.

let slidesToKeep = ['.green.tablet', '.green.phone', '.ipad'];
$slickSlider.slick('slickFilter', String(slidesToKeep));
1
Philippe Adam 31 Июл 2017 в 14:34