Реализуем фильтр в слайдере Swiper.
Вёрстка
<div class="filter-buttons">
<div data-filter="все" class="active">Все фото</div>
<div data-filter="двор">Двор и бассейн</div>
<div data-filter="ресепшн">Зона ресепшн</div>
<div data-filter="спа">СПА-центр</div>
<div data-filter="ресторан">Ресторан</div>
</div>
<div class="swiper myResultsSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-category="двор"><img loading="lazy" src="/wp-content/uploads/2026/04/photo-2.jpg"></div>
<div class="swiper-slide" data-category="ресторан"><img loading="lazy" src="/wp-content/uploads/2026/04/photo-53-25.jpg"></div>
<div class="swiper-slide" data-category="ресторан"><img loading="lazy" src="/wp-content/uploads/2026/04/photo-53-26.jpg"></div>
<div class="swiper-slide" data-category=""><img loading="lazy" src="/wp-content/uploads/2026/04/photo-53-23.jpg"></div>
<div class="swiper-slide" data-category="двор"><img loading="lazy" src="/wp-content/uploads/2026/04/photo-53-24.jpg"></div>
<div class="swiper-slide" data-category="спа"><img loading="lazy" src="/wp-content/uploads/2026/04/photo-53-24.jpg"></div>
<div class="swiper-slide" data-category="ресепшн"><img loading="lazy" src="/wp-content/uploads/2026/04/photo-53-24.jpg"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>Скрипт
if (jQuery('.filter-buttons').length) {
// 1. Сохраняем все исходные слайды
const swiperWrapper = document.querySelector('.myResultsSwiper .swiper-wrapper');
const allSlides = Array.from(swiperWrapper.children);
// 2. Инициализация Swiper
let swiperInstance = new Swiper('.myResultsSwiper', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// 3. Обработка фильтров
document.querySelectorAll('.filter-buttons > *').forEach(btn => {
btn.addEventListener('click', () => {
const filter = btn.getAttribute('data-filter');
// 3.1. Очищаем слайды wrapper
swiperInstance.destroy(true, true); // Полная пересоздание Swiper
swiperWrapper.innerHTML = ''; // Чистим
// 3.2. Добавляем нужные слайды
let slidesToShow = allSlides.filter(slide => {
if (filter === 'все') return true;
return slide.getAttribute('data-category') === filter;
});
slidesToShow.forEach(slide => swiperWrapper.appendChild(slide));
// 3.3. Новый Swiper - теперь с учетом новых слайдов и нормальной loop-логикой!
swiperInstance = new Swiper('.myResultsSwiper', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
// });
// (jQuery: активная кнопка фильтра)
jQuery('.filter-buttons > *').on('change', function(){
jQuery('.filter-buttons > *').removeClass('active');
jQuery(this).addClass('active');
});
}Можно заменить кнопки на выпадающий список
<select id="filterSelect">
<option value="все">Все</option>
<option value="двор">Двор и бассейн</option>
<option value="ресепшн">Зона ресепшн</option>
<option value="спа">СПА-центр</option>
<option value="ресторан">Ресторан</option>
</select>В этом случае нужно немного изменить и скрипт
if (jQuery('#filterSelect').length) {
// 1. Сохраняем все исходные слайды
const swiperWrapper = document.querySelector('.myResultsSwiper .swiper-wrapper');
const allSlides = Array.from(swiperWrapper.children);
// 2. Инициализация Swiper
let swiperInstance = new Swiper('.myResultsSwiper', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// 3. Обработка фильтров
filterSelect.addEventListener('change', () => {
const filter = filterSelect.value;
// 3.1. Очищаем слайды wrapper
swiperInstance.destroy(true, true); // Полная пересоздание Swiper
swiperWrapper.innerHTML = ''; // Чистим
// 3.2. Добавляем нужные слайды
let slidesToShow = allSlides.filter(slide => {
if (filter === 'все') return true;
return slide.getAttribute('data-category') === filter;
});
slidesToShow.forEach(slide => swiperWrapper.appendChild(slide));
// 3.3. Новый Swiper - теперь с учетом новых слайдов и нормальной loop-логикой!
swiperInstance = new Swiper('.myResultsSwiper', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
// });
}Ещё интересный момент как можно облегчить вёрстку слайдера. Использовать плагин Image Gallery Metabox для создания галереи и добавление произвольного поля для attachment.
<div class="swiper myResultsSwiper">
<div class="swiper-wrapper">
<?php foreach ($images as $id) { ?>
<?php $filter = get_post_meta( $id, '_filter', true ); ?>
<div class="swiper-slide" data-category="<?php echo $filter; ?>">
<a href="<?php echo wp_get_attachment_image_url( $id, 'full' ); ?>">
<img loading="lazy" src="<?php echo wp_get_attachment_image_url( $id, 'full' ); ?>">
</a>
</div>
<?php } ?>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>Поле с изображениями заполняется быстро. Единственное у изображений в медиабиблиотеке нужно заполнять специальное поле. Остаётся добавить только пункты фильтра, но и это можно автоматизировать (из массива изображений).
[site-socialshare]
