按类别问题的光滑滑块过滤器

Question

有什么方法可以按班级过滤幻灯片吗？ 我没有这样做。 我需要每个幻灯片滑块一个多个项目，并按类别过滤。 或者任何其他 jquery 插件推荐使用？ 链接：http://jsfiddle.net/bre9427s/34/

如果有人可以提供帮助，我真的很感激

<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;
});

Answer 1

试试这个：

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;
});           

Answer 2

Omid 的代码可以满足一些调整和要求。 如果您在原始小提琴之上构建它，请务必更新代码以引用特定版本的 slick，例如 https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js 原始小提琴中的默认主版本不起作用。还将 Omid 的 .employees 引用更改为 .slider。这是 Omid 代码的工作版本： http://jsfiddle.net/bre9427s/21

这个问题的另一个很好的答案是关于这个问题的演示： jQuery Slick Slider filtering with multiple conditions

Tim 还展示了如何正确使用 slickFilter 和 slickUnfilter 命令以及多个用逗号分隔的类名。但是 slickFilter 的基本用法保持不变：

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

显示他的链接工作的代码笔在这里： https://codepen.io/timrross/pen/JxyVjE

您也可以使用下拉菜单进行操作，如下所示： https://codepen.io/timrross/pen/zRxGMe

警告： .min.js 和未缩小的 .js 版本之间存在功能差异。在许多情况下，非缩小版不起作用以及缩小版不起作用。这已在其他线程中得到多人证实。抱歉，我目前没有链接，但您可以使用我上面的示例轻松确认它，从所需的光滑文件 url 中删除 .min 。一开始我以为我要疯了。

我做了一些并排比较，甚至将一些缩小的代码（经过一些清理）带入原始 JS 文件，但我无法找到问题代码在哪里。据我所知，它不在 SlickFilter 函数中。所以我认为它必须在课堂上的一些较低级别的例程/结构中。业务需求意味着我不再有时间进行诊断。所以，长话短说，如果您的过滤代码根本不起作用，但它应该：尝试切换到最小化版本，您可能会突然发现您的过滤器和代码现在可以正常工作了。