使用Slick Carousel进行过滤时遇到一些问题。过滤器会正确过滤,但似乎还会打乱“ next”和“ prev”箭头。我尝试使用Slick的内置appendArrow方法移动箭头,因为我认为它们可能会陷入过滤中,但是无论我将它们放在页面的什么位置,它们仍然消失。我有99%的把握是,基于此的固有.filter()功能给我带来了问题,
"Note: When a CSS selector string is passed to .filter(), text and comment
nodes will always be removed from the resulting jQuery object during the
filtering process. When a specific node or array of nodes are provided, a text
or comment node will be included in the resulting jQuery object only if it
matches one of the nodes in the filtering array."
有办法防止这种情况发生吗?
链接到屏幕截图之前/之后: https://imgur.com/a/xIdN3tN
您会在标记中注意到按钮消失
JS
//- Initialize Slick
script.
$('.slick-carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
variableWidth: true,
arrows: true,
accessibility: true
});
var filtered = false;
//- Filter script
script.
$('.item-filter').on('click', function() {
if (filtered === false) {
$('.slick-carousel').slick('slickFilter','div:contains("test")');
$(this).text('Unfilter Slides');
filtered = true;
} else {
$('.slick-carousel').slick('slickUnfilter');
$(this).text('Filter Slides');
filtered = false;
}
});
光滑的JS
Slick.prototype.filterSlides = Slick.prototype.slickFilter = function(filter) {
var _ = this;
if (filter !== null) {
_.$slidesCache = _.$slides;
_.unload();
_.$slideTrack.children(this.options.slide).detach();
_.$slidesCache.filter(filter).appendTo(_.$slideTrack);
_.reinit();
}
};
PUG
//- Carousel
.slick-carousel
div
.item
img(src="images/test1.jpg").item-trigger
.item-modal
.item-modal-content
span.item-close-button ×
name test
div
.item
img(src="images/test2.jpg").item-trigger
.item-modal
.item-modal-content
span.item-close-button ×
h1 Item!
div
.item
img(src="images/test3.jpg").item-trigger
.item-modal
.item-modal-content
span.item-close-button ×
name test