我的光滑过滤器在移动视图和调整屏幕大小时不起作用

如何解决我的光滑过滤器在移动视图和调整屏幕大小时不起作用

我正在构建一个房产网站 HERE，其中有一个部分可以按项目选择房产。我使用光滑的属性列表和过滤器，如下图所示。

如果我第一次尝试点击基于项目的过滤器，它仍然正常。但是当屏幕调整大小并在移动视图中时，此过滤器不起作用。

这里有人能帮我处理这个错误吗？

这是我巧妙的过滤js代码：

    $(document).ready(function(){
        $('.slider__filter--item').on('click',function(){
            let filterMenu = $(this).data('filter');

            console.log(filterMenu);
            console.log('.slider__filter--item[data-filter="' + filterMenu + '"]')
            console.log('.slider-product#' + filterMenu)

            $('.slider__filter--item').removeClass('active');
            $('.slider-product').removeClass('active');

            $('.slider__filter--item[data-filter="' + filterMenu + '"]').addClass('active');
            $('.slider-product#' + filterMenu).addClass('active')
        });

        $('.slider__filter').slick({
            autoplay:false,dots: false,arrows:false,infinite: false,slidesToShow: 5,slidesToScroll: 1,responsive: [
                {
                breakpoint: 1200,settings: {
                        slidesToShow: 4,slidesToScroll: 1
                    }
                },{
                breakpoint: 991,settings: {
                        slidesToShow: 3,{
                breakpoint: 575,settings: {
                        slidesToShow: 2,]
        });

        $('.slider-product').slick({
            autoplay:false,arrows:true,prevArrow: '<button class="slick-prev"><i class="fas fa-chevron-left"></i></button>',nextArrow: '<button class="slick-next"><i class="fas fa-chevron-right"></i></button>',slidesToShow: 3,responsive: [
                {
                breakpoint: 575,settings: {
                        slidesToShow: 1,]
        });
    });

HTML

@if (sizeof($data['PROPERTY']) > 0)
    <section class="sections property-recommendation" id="section-property">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class="font-size-40 section__title section__title--white">
                        {{ $data['LANDINGPAGE_PRODUCT_TITLE'] ?? 'title goes here' }}
                    </h2>
                </div>
                <div class="col-12">
                    <div class="tabs-filter">
                        <div class="mb-3 slider__filter">
                           @isset ($data['PROPERTY']['HOT'])
                            <div class="slider__filter--item active" data-filter="type-hot">
                                    <a class="slider__filter--link">Hot</a>
                                </div>
                           @endisset

                           @foreach ($data['PROPERTY']['OTHERS'] as $key => $item)
                                <div class="slider__filter--item" data-filter="type-{{ preg_replace('/\s+/','-',$key) }}">
                                    <a class="slider__filter--link">{{ $key }}</a>
                                </div>
                           @endforeach
                        </div>
                    </div>

                    @isset ($data['PROPERTY']['HOT'])
                        <div class="slider-product active" id="type-hot">
                            @foreach ($data['PROPERTY']['HOT'] as $item)
                                @include('components.image.property',['item' => $item])
                            @endforeach
                        
                        </div>
                    @endisset
                    
                    @foreach ($data['PROPERTY']['OTHERS'] as $key => $items)
                        <div class="slider-product" id="type-{{ preg_replace('/\s+/',$key) }}">
                            @foreach ($items as $item)
                                @include('components.image.property',['item' => $item])
                            @endforeach
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endif

CSS

.tabs-filter{
    padding: 0 17%;
    margin-bottom: 40px;

    @media screen and (max-width:575px){
        padding: 0 10%;
    }

    .slider__filter{
        &--item{
            text-align: center;
            cursor: pointer;
            padding: 10px 0;

            &.active{
                background-color: $orange;
                border-radius: 14px;

                .slider__filter--link{
                    opacity: 1;
                }
            }
        }
        
        &--link{
            text-decoration: none;
            outline: none;
            color: #fff;
            opacity: .5;
        }
    }
}

.slider-product{
    display: block;
    height: 0;
    overflow: hidden;
    position: unset;

    &.active{
        height: auto;
    }
}