Как сделать фильтр слайдов в слайдере на Swiper.js?

Question

[Александр Вернигоров]

При клике на фильтр показываются только те карточки, которые привязаны к нему
После срабатывания фильтра слайдер должен скорректироваться/обновиться (кол-во слайдов, кол-во рядов, стрелки, точки навигации)
html:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }
  
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
  
      }
  
      .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
      }
  
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        height: calc((100% - 30px) / 2);
  
        /* 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;
      }
      .slider{
        max-width: 1200px;
        margin: 0 auto;
        height: 400px;
        margin-top: 50px;
        margin-bottom: 50px;
      }
      .slider-filter{
        margin-bottom: 20px;
      }
    </style>

    <div class="slider">
      <div class="slider-filter">
        <button class="slider-filter__item">всё</button>
        <button class="slider-filter__item">1</button>
        <button class="slider-filter__item">2</button>
        <button class="slider-filter__item">3</button>
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>        
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
      <script>
        var swiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          slidesPerColumn: 2,
          spaceBetween: 30,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });        
      </script>

Answer 1

[xdevelx]

У swiper есть методы https://swiperjs.com/api/#methods update() (либо addSlide() и removeSlide()).
По клику на slider-filter__item фильтруете swiper-slide и потом вызываете update()