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

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

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

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

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 函数中。所以我认为它一定是在课堂上的一些较低级别的例程/结构中。业务需要意味着我不再有时间进行诊断。所以，长话短说，如果您的过滤代码根本不起作用，但它应该：尝试切换到最小化版本，您可能会突然发现您的过滤器和代码现在工作正常。