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

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

Answer 2

尝试一下：

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

滑动过滤器按类问题过滤

2 个答案: