Hướng dẫn làm Swiper slides with filters trong jQuery

Hướng dẫn làm Swiper slides with filters trong jQuery. Chức năng dùng khá nhiều trong các dự án

HTML

<p class="categories"><span>All</span> <span>Fruit</span> <span>Veggie</span></p>   
<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-filter="fruit">Apple</div>
            <div class="swiper-slide" data-filter="fruit">Grape</div>
            <div class="swiper-slide" data-filter="veggie">Green bean</div>
            <div class="swiper-slide" data-filter="veggie">veggie 1</div>
            <div class="swiper-slide" data-filter="veggie">veggie 2</div>
            <div class="swiper-slide" data-filter="fruit">Pear</div>
            <div class="swiper-slide" data-filter="fruit">Pumpkin</div>
            <div class="swiper-slide" data-filter="veggie">Radish</div>
            <div class="swiper-slide" data-filter="fruit">Watermelon</div>
            <div class="swiper-slide" data-filter="fruit">Lemon</div>
          <div class="swiper-slide" data-filter="fruit">Strawberry</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

CSS

body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
.categories {text-align:center}
.categories span {
    padding: 10px 32px;
    cursor: pointer;
}
.categories span.active {
    font-family: bold;
}
    .swiper-container {
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        height: 200px;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        slidesPerColumn: 2,
        paginationClickable: true,
        spaceBetween: 30
    });
    $(".categories span").on("click", function(){
      var filter = $(this).html().toLowerCase();
    var slidesxcol;
      $(".categories span")
      $(".categories span").removeClass("active");
      $(this).addClass("active");
      
      if(filter=="all"){
          $("[data-filter]").removeClass("non-swiper-slide").addClass("swiper-slide").show();
      if($(".swiper-slide").length > 6)
        slidesxcol = 3;
      else slidesxcol = 1;
      swiper.destroy();
      swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        slidesPerColumn: slidesxcol,
        paginationClickable: true,
        spaceBetween: 30
    });
      }
      else {
        $(".swiper-slide").not("[data-filter='"+filter+"']").addClass("non-swiper-slide").removeClass("swiper-slide").hide();
          $("[data-filter='"+filter+"']").removeClass("non-swiper-slide").addClass("swiper-slide").attr("style", null).show();
      console.log($(".swiper-slide").length)
      if($(".swiper-slide").length > 6)
        slidesxcol = 3;
      else slidesxcol = 1;
      swiper.destroy();
      swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        slidesPerColumn: slidesxcol,
        paginationClickable: true,
        spaceBetween: 30
    });
      }
    })