Slick Filter не фильтрует, просто удаляет все элементы - PullRequest
Новая
       23

Slick Filter не фильтрует, просто удаляет все элементы

2 голосов
/ 17 октября 2019

У меня проблемы с функцией SlickFilter, когда я нажимаю кнопку, предназначенную для фильтрации, она просто удаляет все элементы, а не фильтрует. Я пишу свой код ниже. 

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

Все выглядит работающим, но когда я нажимаю кнопку для фильтрации, Слик просто удали все div'ы, кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 22 октября 2019

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