Делаю фильтр внутри swiper slider. Слайдер работает некорректно когда фильтрую слайдыю

помогите кто-нибудь, пожалуйста, пытаюсь сделать фильтр внутри слайдер свайпер, но когда пользуюсь фильтром и скрываю несколько слайдов, слайдер думает, что они не скрыты, хотя у них display: none.

прикрепил ссылку на видео моей проблемы.

https://drive.google.com/file/d/1bZ8bBqQ0u7wHU4pSNVDJL8mVucJU53jE/view?usp=sharing

вот код:

js:

const eventsFilterBtns = $('.events__filter-btns');
const eventsSwiperItems = $('.events__swiper-item');
const eventsFilterBtn = $('.events__filter-btn');
function eventsFilter() {
    eventsFilterBtns.on("click", event => {
        const targetId = event.target.getAttribute('data-id')
        const target = $(event.target)
    
        if (target.hasClass('events__filter-btn')) {
            eventsFilterBtn.each(function () {
                $(this).removeClass('active');
            })
            target.addClass('active')
        }
    
        switch (targetId) {
            case 'all':
                getEventsItems('events__swiper-item')
                break;
            case 'events-new':
                getEventsItems(targetId)
                break;
            case 'events-meeting':
                getEventsItems(targetId)
                break;
        }
    });
}
eventsFilter()
function getEventsItems(className) {
    eventsSwiperItems.each(function (index, item) {
        if ($(this).hasClass(className)) {
            var that = $(this);
        
            setTimeout(function () {
                that.show(400);
            }, 0);
        } else {
            var that = $(this);
        
            setTimeout(function () {
                that.hide(400);
            }, 430);
        }
    });
}
//events-swiper
var swiper = new Swiper(".events__swiper", {
    slidesPerView: 'auto',
    spaceBetween: 24,
    navigation: {
        prevEl: ".events__swiper-btn-prev",
        nextEl: ".events__swiper-btn-next",
    },
    breakpoints: {
        769: {
            slidesPerView: 3,
            spaceBetween: 24,
        },
        1024: {
            slidesPerView: 4,
            spaceBetween: 80,
        },
    },
});

html:

<section class="main__events events general-block">
    <div class="events__container container">
        <div class="events__header general-header show">
            <h2 class="events__title general-title">
                Новости
            </h2>
            <div class="events__filter-btns" id="events__filter-btns">
                <button class=" events__filter-btn active" data-id="all">все</button>
                <button class=" events__filter-btn" data-id="events-new">новости</button>
                <button class=" events__filter-btn" data-id="events-meeting">мероприятия</button>
            </div>
            <div class="events__swiper-btns-wrapper swiper-btns-wrapper">
                <div class="events__swiper-btns swiper-btns">
                    <button class="events__swiper-btn-prev swiper-btn-prev">
                        <svg width="40" height="20" viewBox="0 0 40 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M40 11.6667L6.33333 11.6667L12.3333 17.6667L10 20L8.74228e-07 10L10 8.74228e-07L12.3333 2.33334L6.33333 8.33333L40 8.33333L40 11.6667Z"
                                fill="#ADADAD" />
                        </svg>
                    </button>
                    <button class="events__swiper-btn-next swiper-btn-next">
                        <svg width="40" height="20" viewBox="0 0 40 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M-7.28523e-07 11.6667L33.6667 11.6667L27.6667 17.6667L30 20L40 10L30 8.74228e-07L27.6667 2.33334L33.6667 8.33333L-1.01993e-06 8.33333L-7.28523e-07 11.6667Z"
                                fill="#ADADAD" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div style="overflow: hidden;" class="swiper events__swiper general-swiper show">
            <div class="swiper-wrapper events__swiper-wrapper">
                <div class="swiper-slide events__swiper-item events-new">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/1.png" alt="">
                                </div>
                                <span>26 мая</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                Новые рекорды подписчиков в социальных сетях Marie Claire
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-new">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/2.png" alt="">
                                </div>
                                <span>20 мая</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                PSYCHOLOGIES приглашает в полезное путешествие в Карелию
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-meeting">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/3.png" alt="">
                                </div>
                                <span>16 мая</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                Marie Claire провёл вечеринку для блогеров
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-meeting">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/4.png" alt="">
                                </div>
                                <span>16 мая</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                Конкурс красоты MISS MAXIM 2022 стартовал
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-new">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/5.png" alt="">
                                </div>
                                <span>сегодня</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                Татьяна Бакальчук стала героиней февральского номера Marie Claire
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-meeting">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/6.png" alt="">
                                </div>
                                <span>сегодня</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                Юбилей: 160 лет журналу «Вокруг Света»
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-new">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/7.png" alt="">
                                </div>
                                <span>сегодня</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                Рейтинг сексуальности звезд по версии MAXIM
                            </div>
                        </figure>
                    </a>
                </div>
                <div class="swiper-slide events__swiper-item events-meeting">
                    <a href="#" class="events__item general-swiper__item">
                        <figure>
                            <div class="events__image-wrapper general-swiper__image-wrapper">
                                <div class="events__image general-swiper__image ibg">
                                    <img src="img/main/2events/8.png" alt="">
                                </div>
                                <span>сегодня</span>
                            </div>
                            <div class="events__item-text general-swiper__item-text">
                                PSYCHOLOGIES приглашает в полезное путешествие в Карелию
                            </div>
                        </figure>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>