How to filter swiper carousel using jquery?

Question

I have a code like below and I want to filter according to the selected select option, but I cannot show the selected data on the screen. I use Umbraco technology and I need to filter the swiper element can you help me to solve this problem

            <div class="d-flex justify-content-end gap-lg-4 mb-lg-3">
                <select class="form-select" aria-label="Şirket Seç">
                    @{
                        var uniqueCompanyTitles = allCertificates
                            .Where(c => !string.IsNullOrWhiteSpace(c?.CompanyTitle))
                            .Select(c => c.CompanyTitle)
                            .Distinct()
                            .ToList();
                        <option value="Tümü">Tümü</option>
                        foreach (var companyTitle in uniqueCompanyTitles)
                        {
                            <option value="@companyTitle">@companyTitle</option>
                        }
                    }
                </select>
            </div>
            <div class="swiper cer-swiper ps-3">
                <div class="swiper-wrapper">
                    @if (allCertificates.Count() != 0)
                    {
                        @for (var i = 0; i < allCertificates?.Count(); i += 3)
                        {
                            <div class="swiper-slide certificate-swiper d-flex flex-column gap-3">
                                @for (var j = i; j < i + 3 && j < allCertificates?.Count(); j++)
                                {
                                    <div class="d-flex flex-row">
                                            <div class="d-none cer-company-title">@allCertificates?.ElementAt(j)?.CompanyTitle</div>
                                      
                                    </div>
                                }
                            </div>
                        }
                    }
                </div>
            </div>
        </div>


<script>
    $(document).ready(function () {
        var swiper = new Swiper(".cer-swiper", {
            slidesPerView: 1,
            spaceBetween: 120,
            loop: false,
            breakpoints: {
                992: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                }
            }
        });

        $(".form-select[aria-label='Şirket Seç']").on("change", function () {
            var selectedCompany = $(this).val().toLowerCase();
            console.log('selectedCompany:',selectedCompany)
            filterList(selectedCompany);
        });
       
        function filterList(value) {
            var slides = swiper.slides;
            for (var i = 0; i < slides.length; i++) {
                var slide = slides?.[i];
                console.log("slide:",slide)
                var companyTitleElement = $(slide).find('.cer-company-title');
                var companyTitle = $(slide).find('.cer-company-title').text().toLowerCase().trim();
                console.log('value: ',value)
                console.log('companyTitle: ',companyTitle)
                console.log("$(slide).find('.cer-company-title')", $(slide).find('.cer-company-title'))
                if (value === 'tümü' || companyTitle === value) {
                    companyTitleElement.show();
                } else {
                     companyTitleElement.hide();
                }
            }
                swiper.updateSize();
                swiper.updateSlides();
                swiper.updateProgress();
                swiper.updateSlidesClasses();
                swiper.slideTo(0);
                swiper.scrollbar.updateSize();
        }
    });
</script>

companyTitleElement.show();

and

companyTitleElement.hide();

I tried but couldn't see the filtering result on the screen

Answer 1

There are two ways, one is to pass the filtered data through your Swiper API, the other is to destroy the entire Swiper object and create it twice in the "filterList" method.

First, log the value of "companyTitleElement" and make sure of its value, then use swiper.update() in the "filterList" method.

swiper.update();