Чтобы добавить два элемента select в фильтр слайдов для использования с Swiper, вам понадобится добавить обработчики событий change для обоих select элементов. В каждом обработчике вы должны получить текущие выбранные значения обоих select элементов и пройти по всем слайдам, чтобы узнать, какие из них должны быть скрыты, а какие отображены в соответствии с выбранными значениями.
Вот пример кода, который решает вашу проблему с двумя select элементами:
```javascript
// Получить все слайды и select элементы
const slides = Array.from(document.querySelectorAll('.swiper-slide'));
const selects = Array.from(document.querySelectorAll('select'));
// Создать функцию для проверки соответствия значения из select значению из слайда
const slideMatchesValue = (slide, value) => {
const slideValues = slide.dataset.values.split(',');
return slideValues.includes(value);
};
// Создать функцию для фильтрации слайдов на основе выбранных значений из select
const filterSlides = () => {
const selectedValues = selects.map(select => select.value);
slides.forEach(slide => {
const shouldHide = selectedValues.some(value => !slideMatchesValue(slide, value));
slide.style.display = shouldHide ? 'none' : 'block';
});
};
// Добавить обработчики событий change для select элементов
selects.forEach(select => {
select.addEventListener('change', filterSlides);
});
```
Этот код будет скрывать слайды, которые не соответствуют выбранным значениям из обоих select элементов. При изменении выбранных значений в любом из select элементов, функция `filterSlides` будет вызываться для обновления отображения слайдов.
Вы можете добавить этот код в вашу песочницу Swiper и повесить слушатели событий change на два select элемента с помощью тегов `<script>` и `<style>`. После этого, при изменении значений в выбранных элементах select, слайды будут фильтроваться и отображаться в соответствии с выбранными значениями.