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

Written by admin
Posted on Fri, 02/11/2022 - 05:13
69 views

Share Everywhere

Table of contents

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
    });
      }
    })

Có thề xem để tưởng tượng

Swiper filter

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
1 + 10 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”