jQuery Slick Slider filtering with multiple conditions

Question

Here is a HTML for slick slider:

<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>

I need to filter by color (black, white, green) and device (phone, ipad, tablet). So for example, need to filter by classname of .white and .tablet. Filter format is : "color" and "device". It's dynamic, not static. Please advice me. Any help will be appreciated. Thanks.

Answer 1

This is actually quite simple.

As slick just uses jquery's .filter() http://api.jquery.com/filter/ , you can use a multiple class selector in a single string. Just join the classes you want to keep with a comma.

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

I've created a codepen demo, so you can add as many filters as you like: Slick Carousel multiple filter demo.

Edit for text links

It is pretty straight forward to use text links rather than select boxes. you could just use a click listener on a text link.

Add text like this:

<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>

The click listener:

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

I forked the original code pen to show it working... https://codepen.io/timrross/pen/JxyVjE

Answer 2

It is possible to filter multiple conditions with slick slider. You need to filter all your conditions at one.

let slidesToKeep = ['.green.tablet', '.green.phone', '.ipad'];
$slickSlider.slick('slickFilter', String(slidesToKeep));