CODEWITHSUNDEEP
javascriptjqueryslick.js
Tiago P.C
Tiago P.C

Reputation: 99

Slick Filter not filtering, just deleting all elements

I'm having problems with SlickFilter function, when i hit the button that is suposed to filter, it is just deleting all elements, is not filtering. I'm writing my code below.

$('.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>

Here is a jsfiddle with the code: https://jsfiddle.net/9do7yxcg/4/

Everything looks working, but when i press the button to filter, Slick just delete all divs, can someone help me?

Upvotes: 2

Views: 3476

Answers (1)

Meziane
Meziane

Reputation: 1667

SlickFilter doesn't work when using rows, as you can see here for an example.

So, the simplest workaround to this problem is to do the filter yourself by cloning the carousel, then empty it and add the slides having the CSS-class you want to use as a filter, from the clone. Here is a working jsfiddle. Here is the code:

$(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,
      }
    }
    ]
    });
}

Upvotes: 1

Related Questions