swiper slider with filter only javascript

Question

我有一个带有过滤器类别的swiperjs（全部，filter-1，filter-2，....）。

const btns = document.querySelectorAll('.btn');
      btns.forEach((btn) => {
        btn.addEventListener('click', function (e) {
          e.preventDefault();

          var filter = btn.getAttribute('data-filter');

          if (!btn.classList.contains('swiper-active')) {
            const butns = document.querySelectorAll('.btn');
            butns.forEach((b) => {
              b.classList.remove('swiper-active');
            });
            btn.classList.add('swiper-active');
          } else {
            btn.classList.remove('swiper-active');
          }

          const slideNone = document.querySelector(
            '.swiper-product .swiper-slide'
          );
          slideNone.classList.add('d-none');
          const slideFilter = document.querySelector(
            '.swiper-product .swiper-slide' + filter
          );
          slideFilter.style.display = '';

          productSwiper.updateSize();
          productSwiper.updateSlides();
          productSwiper.updateProgress();
          productSwiper.updateSlidesClasses();
          productSwiper.slideTo(0);
          productSwiper.scrollbar.updateSize();
        });
      });

      var filterSwiper = new Swiper('.swiper-filter', {
        slidesPerView: 3,
        spaceBetween: 30,
      });

      var productSwiper = new Swiper('.swiper-product', {
        slidesPerView: 3,
        centeredSlides: false,
        spaceBetween: 8,
        paginationClickable: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });

body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 300px;
        margin: 20px auto;
      }

      .swiper-active {
        color: red;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .append-buttons {
        text-align: center;
        margin-top: 20px;
      }

      .append-buttons a {
        display: inline-block;
        border: 1px solid #007aff;
        color: #007aff;
        text-decoration: none;
        padding: 4px 10px;
        border-radius: 4px;
        margin: 0 10px;
        font-size: 13px;
      }

 <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"
      crossorigin="anonymous"
    />

    <!-- Link Swiper's CSS -->

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css"
    />
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js"></script>


 <div class="container py-4">
      <div class="swiper-container swiper-filter mb-4">
        <div class="swiper-wrapper">
          <div class="swiper-slide p-0">
            <a data-filter="" class="btn w-100 swiper-active">All</a>
          </div>
          <div class="swiper-slide p-0">
            <a data-filter=".filter1" class="btn w-100">Filter-1</a>
          </div>
          <div class="swiper-slide p-0">
            <a data-filter=".filter2" class="btn w-10">Filter-2</a>
          </div>
        </div>
      </div>

      <div class="swiper-container swiper-product">
        <div class="swiper-wrapper">
          <div class="swiper-slide filter1">1</div>
          <div class="swiper-slide filter2">2</div>
          <div class="swiper-slide filter1">1</div>
          <div class="swiper-slide filter2">2</div>
          <div class="swiper-slide filter1">1</div>
          <div class="swiper-slide filter2">2</div>
          <div class="swiper-slide filter1">1</div>
          <div class="swiper-slide filter2">2</div>
          <div class="swiper-slide filter1">1</div>
          <div class="swiper-slide filter2">2</div>
          <div class="swiper-slide filter1">1</div>
          <div class="swiper-slide filter2">2</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>

问题： 我怎样才能只为滑动滑块做这个过滤器 javascript？

不工作过滤器，不工作 sliderFilter.style.display。你能帮帮我吗？

如何在 javascript 上替换 ('.swiper-product .swiper-slide' + filter).css('display', '')？