jQuery 具有多个条件的 Slick Slider 过滤

Question

这里有一个 HTML 的 slick 滑块：

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

我需要按颜色（黑色、白色、绿色）和设备（phone、ipad、平板电脑）进行过滤。因此，例如，需要按 .white 和 .tablet 的类名进行过滤。过滤器格式为："color" 和 "device"。它是动态的，而不是静态的。请给我建议。任何帮助将不胜感激。谢谢

Answer 1

这是不可能的。 Slick 滑块不支持此类过滤。

Answer 2

可以使用灵活的滑块过滤多个条件。您需要一次过滤所有条件。

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

Answer 3

这个其实很简单。

由于 slick 仅使用 jquery 的 .filter() http://api.jquery.com/filter/ ，您可以在单个字符串中使用多个 class select 或。只需用逗号加入您想保留的 classes 即可。

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

我创建了一个 codepen 演示，因此您可以添加任意数量的过滤器：Slick Carousel multiple filter demo。

编辑文本 links

使用 link 文本框而不是 select 框非常简单。您可以在文本 link.

上使用点击监听器

像这样添加文字：

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

点击侦听器：

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

我 fork 了原来的代码笔来展示它的工作...https://codepen.io/timrross/pen/JxyVjE

jQuery 具有多个条件的 Slick Slider 过滤

jQuery Slick Slider filtering with multiple conditions

javascript

jquery

slider