Slick Filter 不过滤，只是删除所有元素

Question

我在使用 SlickFilter function 时遇到问题，当我点击应该过滤的按钮时，它只是删除所有元素，而不是过滤。 我在下面写我的代码。

 $('.tecidos-container').slick({ dots: false, arrows: true, slidesPerRow: 2, rows: 3, responsive: [{ breakpoint: 760, settings: { slidesPerRow: 2, } }] }); $('.tecidos-filter-button').on('click', function() { $('.filtering').slick('slickUnfilter'); $('.filtering').slick('slickFilter', '.tecido'); $('.active').removeClass('active'); $('.tecido').addClass('active'); filtered = true; });

 img { max-width: 90%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <button class="tecidos-filter-button">Tecidos</button> <div class="tecidos-container filtering"> <div class="tecidos-item tecido"><img src="http://placehold.it/500x500?text=Tecido" alt=""></div> <div class="tecidos-item tecido"><img src="http://placehold.it/500x500?text=Tecido" alt=""></div> <div class="tecidos-item pintura"><img src="http://placehold.it/500x500?text=Pintura" alt=""></div> <div class="tecidos-item pintura"><img src="http://placehold.it/500x500?text=Pintura" alt=""></div> <div class="tecidos-item tingimento"><img src="http://placehold.it/500x500?text=Tingimento" alt=""></div> <div class="tecidos-item tingimento"><img src="http://placehold.it/500x500?text=Tingimento" alt=""></div> </div>

这是一个带有代码的jsfiddle： https://jsfiddle.net/9do7yxcg/4/

一切看起来都正常，但是当我按下按钮进行过滤时，Slick 只是删除了所有 div，有人可以帮我吗？

Answer 1

这是一个工作的codepen。 请注意，我使用的是 1.8.1 版本的 slick：

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js

和版本 3.2.1 的 jquery

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

我添加了以下 css：

.filtering {
  width: 480px;  
}

.tecidos-item {
  width: 220px;
  height: 100px;  
  padding: 1rem;
  border: 1px solid #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
img {
  width: 200px;
  height:100px;
}

这是jsfiddle

Answer 2

SlickFilter在使用行时不起作用，您可以在此处查看示例。

因此，解决此问题的最简单的解决方法是通过克隆轮播自己进行过滤，然后将其清空并从克隆中添加具有您想要用作过滤器的 CSS 类的幻灯片。 这是一个工作的jsfiddle。 这是代码：

$(document).ready(function (){  
    var $slider = $( '.filtering' );    
    var $slider_clone = $slider.clone( true, true ); // add true, true to clone events too!
    // Create a new clone for the slider items
    var $new_slider = $slider_clone.clone( true, true );

    init_slider();

    $('.filtering').css("display","block");   

    // When someone clicks on a filter
    $( '.tecidos-filter-button').on( 'click', function(){
        var filter_name = 'tecido'; 

        // Clear current slider
        $slider.slick( 'unslick' ); // Remove slick
        $slider.empty(); // Remove elements

        // Show only filtered items
        if( filter_name == "All" ) {
            $slider.append( $new_slider.find( '.tecidos-item' ) );
        } else {
            //console.log("length: " + $new_slider.find( '.tecidos-item.' + filter_name ).length)
            $slider.append( $new_slider.find( '.tecidos-item.' + filter_name ) );
        }

        // Slick slider init 
        init_slider();

    });

});

function init_slider() {
  $('.filtering').slick({
    dots:false,
    arrows:true,
    slidesPerRow: 2,
    rows: 3,
    responsive: [
    {
      breakpoint: 760,
      settings: {
        slidesPerRow: 2,
      }
    }
    ]
    });
}