<div class="filters">
      <select name="" id="club">
        <option value="all">All</option>
        <option value="Север">Север</option>
        <option value="Юг">Юг</option>
        <option value="Запад">Запад</option>
        <option value="Восток">Восток</option>
      </select>
      <select name="" id="spec">
        <option value="all">All</option>
        <option value="Йога">Йога</option>
        <option value="ХотАйрон">ХотАйрон</option>
        <option value="Кроссфит">Кроссфит</option>
        <option value="Групповые занятия">Групповые занятия</option>
        <option value="Тренажерный зал">Тренажерный зал</option>
        <option value="Таббата">Таббата</option>
        <option value="Стретчинг">Стретчинг</option>
        <option value="Пилатес">Пилатес</option>
      </select>
    </div>
    <div class="slider">
      <!-- Slider main container -->
      <div class="swiper trainers">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div
            class="swiper-slide"
            data-club="Север"
            data-spec="Йога,Кроссфит,ХотАйрон"
          >
            Slide1
          </div>
          <div
            class="swiper-slide"
            data-club="Запад"
            data-spec="ХотАйрон,Йога"
          >
            Slide2
          </div>
          <div
            class="swiper-slide"
            data-club="Юг,Запад,Север"
            data-spec="КросФит,Групповые занятия,Тренажерный зал"
          >
            Slide3
          </div>
          <div
            class="swiper-slide"
            data-club="Запад,Юг"
            data-spec="Тренажерный зал,Кроссфит"
          >
            Slide4
          </div>
          <div
            class="swiper-slide"
            data-club="Восток"
            data-spec="Групповые занятия,ХотАйрон,Таббата"
          >
            Slide5
          </div>
          <div
            class="swiper-slide"
            data-club="Юг"
            data-spec="Таббата,Йога,Пилатес"
          >
            Slide6
          </div>
          <div
            class="swiper-slide"
            data-club="Восток,Север,Запад"
            data-spec="Стретчинг,Йога,Тренажерный зал"
          >
            Slide7
          </div>
          <div
            class="swiper-slide"
            data-club="Юг,Север"
            data-spec="Пилатес,Групповые занятия"
          >
            Slide8
          </div>
          <div
            class="swiper-slide"
            data-club="Запад,Север"
            data-spec="Йога,ХотАйрон,Стретчинг"
          >
            Slide9
          </div>
          <div
            class="swiper-slide"
            data-club="Север"
            data-spec="Таббата,Тренажерный зал"
          >
            Slide10
          </div>
        </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

body {
  background-color: #ddd;
}
.slider {
  max-width: 900px;
  margin: 0 auto;
}
.swiper {
  width: 100%;
  aspect-ratio: 16/7;
}

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

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  column-gap: 2%;
  margin-bottom: 2em;
}
select {
  display: block;
  border: 1px solid red;
  flex: 0 1 350px;

  padding: 0.25em;
  background-color: #fff;
  font-size: 1.5em;
}

.hidden {
  display: none !important;
}

const swiper = new Swiper(".swiper", {
  // Optional parameters
  slidesPerView: 4,
  spaceBetween: 30,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

let trainersSlider = document.querySelector(".trainers").swiper;
const slides = document.querySelectorAll(".swiper-slide");
const clubSelect = document.querySelector("#club");

slides.forEach((item) => {
  let clubData = item.dataset.club;
  let specData = item.dataset.spec;
  let clubsArr = clubData.toLowerCase().split(",");
  let specArr = specData.toLowerCase().split(",");
  let str = [...clubsArr, ...specArr].join(", ");
  item.textContent += str;
});

const getValue = (evt) => {
  return evt.target.value;
};

let clubVal = "all";
let specVal = "all";

club.addEventListener("change", function (evt) {
  let club = evt.target.value;
  clubVal = club.toLowerCase();
  filter(clubVal, specVal);
});
spec.addEventListener("change", function (evt) {
  let spc = evt.target.value;
  specVal = spc.toLowerCase();
  filter(clubVal, specVal);
});

function filter(cVal, spVal) {
  const clubsAllSelected = cVal === "all";
  const specsAllSelected = spVal === "all";

  slides.forEach((item) => {
    let clubData = item.dataset.club;
    let specData = item.dataset.spec;
    let clubsArr = clubData.toLowerCase().split(",");
    let specArr = specData.toLowerCase().split(",");

    if (!clubsAllSelected && !clubsArr.includes(cVal)) {
      item.classList.add("hidden");
      trainersSlider.update();
      trainersSlider.updateSlides();
    } else if (!specsAllSelected && !specArr.includes(spVal)) {
      item.classList.add("hidden");
      trainersSlider.update();
      trainersSlider.updateSlides();
    } else {
      item.classList.remove("hidden");
      let trainersSlider = document.querySelector(".trainers").swiper;
      trainersSlider.update();
      trainersSlider.updateSlides();
    }
  });

  // let sliderClubArr = [...slides].filter((item) => {
  //   let clubData = item.dataset.club;
  //   let clubsArr = clubData.toLowerCase().split(",");
  //   return cVal !== null && !clubsArr.includes(cVal);
  // });

  // let sliderSpecArr = [...slides].filter((item) => {
  //   let specData = item.dataset.spec;
  //   let specArr = specData.toLowerCase().split(",");
  //   return spVal !== null && !specArr.includes(spVal);
  // });

  // console.log(sliderSpecArr, sliderClubArr);
}