Как реализовать фильтр слайдов с 2 select для Swiper?

Для реализации фильтра слайдов с двумя select для Swiper вам потребуется использовать следующий подход:

1. Создайте HTML-структуру, которая будет содержать ваши select элементы и Swiper контейнер:

<div>
  <select id="filter1">
    <option value="all">All</option>
    <option value="category1">Category 1</option>
    <option value="category2">Category 2</option>
    <option value="category3">Category 3</option>
  </select>
  <select id="filter2">
    <option value="all">All</option>
    <option value="type1">Type 1</option>
    <option value="type2">Type 2</option>
    <option value="type3">Type 3</option>
  </select>
</div>

<div id="swiper-container" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide category1 type1">Slide 1</div>
    <div class="swiper-slide category2 type2">Slide 2</div>
    <div class="swiper-slide category1 type2">Slide 3</div>
    <div class="swiper-slide category2 type3">Slide 4</div>
    <div class="swiper-slide category3 type3">Slide 5</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

2. Импортируйте Swiper и создайте новый экземпляр Swiper, указав элемент контейнера:

import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  // Параметры Swiper
});

3. Отслеживайте изменения в select элементах и обновляйте фильтр слайдов:

const filter1 = document.getElementById('filter1');
const filter2 = document.getElementById('filter2');

filter1.addEventListener('change', updateFilter);
filter2.addEventListener('change', updateFilter);

function updateFilter() {
  const selectedCategory = filter1.value;
  const selectedType = filter2.value;

  const slides = document.querySelectorAll('.swiper-slide');

  slides.forEach(slide => {
    const hasCategory = slide.classList.contains(selectedCategory) || selectedCategory === 'all';
    const hasType = slide.classList.contains(selectedType) || selectedType === 'all';

    slide.style.display = (hasCategory && hasType) ? 'block' : 'none';
  });
}

4. Запустите Swiper:

swiper.init();

Это весь код, который вам понадобится для реализации фильтра слайдов с двумя select для Swiper. При изменении значения в select элементах, скрипт будет скрывать или отображать слайды в соответствии с выбранными категориями и типами.