slick slider filter by class issue

Question

It's there any way I can filter the slide by class? I fail to do so. I need a multiple item per slide slider with a filter by class. Or any other jquery plugin recommend to use? link: http://jsfiddle.net/bre9427s/34/

I am really appreciate if somebody can help

<div class="slick-buttons">
  <a class="filter-btn view-all active">View All</a>
  <a class="filter-btn view-a">View a</a>
  <a class="filter-btn view-b">View b</a>
  <a class="filter-btn view-c">View c</a>
</div>

<section class="slider">
  <div class="category-a">slide1-a</div>
  <div class="category-b">slide2-b</div>
  <div class="category-c">slide3-c</div>
  <div class="category-a">slide4-a</div>
  <div class="category-c">slide5-c</div>
  <div class="category-b">slide6-b</div>
</section>

$(".slider").slick({
  slidesToShow: 3,
  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});

var filtered = false;

$('.viewall').on('click', function() {
  $('.active').removeClass('active');
  $('.viewall').addClass('active');
  $('.slider').slick('slickUnfilter');
  filtered = false;
});
$('.view-a').on('click', function() {
  $('.slider').slick('slickFilter','.category-a');
  $('.active').removeClass('active');
  $('.view-a').addClass('active');
  filtered = true;
});

$('.view-b').on('click', function() {
  $('.slider').slick('slickFilter','.category-b');
  $('.active').removeClass('active');
  $('.view-b').addClass('active');
  filtered = true;
});

$('.view-c').on('click', function() {
  $('.slider').slick('slickFilter','.category-c');
  $('.active').removeClass('active');
  $('.view-c').addClass('active');
  filtered = true;
});

Solution 1

Omid's code will work with some tweaks and requirements. If you build it on top of the original fiddle, be sure to update the code to reference a specific version of slick, like https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js The default master version in the original fiddle does not work. Also change Omid's .employees references to be .slider. Here is a working version of Omid's code: http://jsfiddle.net/bre9427s/21

Another very good answer to this questions exists with a demo on this question: jQuery Slick Slider filtering with multiple conditions

Tim also shows how to properly use the slickFilter and slickUnfilter commands with multiple class names separated by commas. However the basic use of slickFilter remains the same:

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

The code pen showing his work with links is here: https://codepen.io/timrross/pen/JxyVjE

You could also do it with dropdowns as shown here: https://codepen.io/timrross/pen/zRxGMe

WARNING: There is a functional difference between the .min.js and the non-minified .js version. There are a number of situations where the non-minified does NOT work and where the minified version DOES work. This has been confirmed by multiple people in other threads. Sorry, I don't have the links at the moment, but you can easily confirm it using my examples above, removing the .min from the slick required file url. I thought I was going nuts at first.

I did some side-by-side comparison and even brought some of the minified code (with some cleanup) into the original JS file, but I was not able to find where the problem code is. It's not in the SlickFilter functions, so far as I can tell. So I think it must be in some lower level routine/structure in the class. Business needs meant I no longer had time to diagnose. So, long story short, if your filtering code doesn't work at all but it should: try switching to the minimized version and you may suddenly find your filters and code now work fine.

Solution 2

try this:

html:

<div class="slick-buttons">
   <a class="filter-btn active" data-attribute="all">View All</a>
   <a class="filter-btn" data-attribute="a">View a</a>
   <a class="filter-btn" data-attribute="b">View b</a>
   <a class="filter-btn" data-attribute="c">View c</a>
</div>

<section class="slider">
   <div class="a">slide1-a</div>
   <div class="b">slide2-b</div>
   <div class="c">slide3-c</div>
   <div class="a">slide4-a</div>
   <div class="c">slide5-c</div>
   <div class="b">slide6-b</div>
</section>

js:

$(".slider").slick({
   slidesToShow: 3,
   responsive: [{
     breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});

var filtered = false;
$('.filter-btn').on('click',function(){
    $('.filter-btn').removeClass('active');
    var filter = $(this).data('attribute');
    if(filter=='all'){
        $('.employees').slick('slickUnfilter');
    }else{
        $('.employees').slick('slickUnfilter').slick('slickFilter','.'+filter);
    }
    $(this).addClass('active');
    filtered = true;
});           

Comments

[demoncoder]

"TT" is a crying face with tears

[delinear]

Your first problem is that slickFilter has to be passed a slide or slides, whereas you are passing it the class of a div within a slide. Instead of doing $('.slider').slick('slickFilter','.category-a'); you could do $('.slider').slick('slickFilter',$('.category-a').parent().p‌​arent());.

[bhu1st]

Is $('.employees') correct code based on your html provided?

[Sean Doherty]

This answer needs more exposure! The difference between min and non-min is hidden and unexpected. I was using the non-minified fork that fixes the passive listener warning in Chrome, but as stated, the filter function is broken unless you're using the minified original!