jquery slick.js 基于数据属性的滑块和过滤
jquery slick.js slider and filtering based on data attributes
在使光滑滑块的过滤功能对数据属性起作用时遇到一些问题。
html :
<div id="slider2">
<div data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div data-test-id="5">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
</div>
js :(当然是在滑块初始化之后)
$('#slider2').slick('slickFilter','[data-test-id="1"]');
要过滤的 js 会在明显有两张幻灯片具有 data-test-id="1"
时删除所有幻灯片。如果我 运行 $('#slider2').slick('slickUnfilter');
所有幻灯片都按原样返回。
我想我需要更多关于 slick 如何执行过滤的详细信息,但文档中没有太多关于此的信息。它给出了示例 $('.filtering').slick('slickFilter',':even');
,但这在这里并没有真正帮助我,因为我需要使用数据属性。它只是说在调用它时使用 'Selector or Function' 并且它使用 jquery .filter().
得到它与一些 trial/error 和一些变化一起工作。
html :
<div id="slider2">
<div class="slickSlide" data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div class="slickSlide" data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div class="slickSlide" data-test-id="5">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
</div>
js :
$('#slider2').slick('slickFilter', function() {
return $(this).find('.slickSlide').attr("data-test-id") == "1";
});
在使光滑滑块的过滤功能对数据属性起作用时遇到一些问题。
html :
<div id="slider2">
<div data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div data-test-id="5">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
</div>
js :(当然是在滑块初始化之后)
$('#slider2').slick('slickFilter','[data-test-id="1"]');
要过滤的 js 会在明显有两张幻灯片具有 data-test-id="1"
时删除所有幻灯片。如果我 运行 $('#slider2').slick('slickUnfilter');
所有幻灯片都按原样返回。
我想我需要更多关于 slick 如何执行过滤的详细信息,但文档中没有太多关于此的信息。它给出了示例 $('.filtering').slick('slickFilter',':even');
,但这在这里并没有真正帮助我,因为我需要使用数据属性。它只是说在调用它时使用 'Selector or Function' 并且它使用 jquery .filter().
得到它与一些 trial/error 和一些变化一起工作。
html :
<div id="slider2">
<div class="slickSlide" data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div class="slickSlide" data-test-id="1">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
<div class="slickSlide" data-test-id="5">
<img src="test.jpg" title="test" alt="test" height="120">
</div>
</div>
js :
$('#slider2').slick('slickFilter', function() {
return $(this).find('.slickSlide').attr("data-test-id") == "1";
});