Javascript Owl转盘图像幻灯片对调整大小的响应不好

我正在制作一个网页，该网页使用Owl旋转木马制作图像滑块。但是，它们对屏幕大小调整的响应不好，我以前在其他页面上也使用过它们，它们工作得很好。为了演示问题，我拍摄了一段屏幕视频：。非常感谢您的帮助

HTML:

---

最好的解决方案是将responsiveRefreshRate选项设置为

responsiveRefreshRate:10

（默认200ms）。然而，我现在发现了一个新的滑块插件，名为Flickity，这是惊人的。到目前为止，最好的滑块插件我用过

最好的解决方案是将responsiveRefreshRate选项设置为

responsiveRefreshRate:10

（默认200ms）。然而，我现在发现了一个新的滑块插件，名为Flickity，这是惊人的。到目前为止，最好的滑块插件我用过

<div class="module__container--half flex__responsive">

        <div class="module__container--item">
            <div class="owl-carousel owl-theme filler__slider filler__slider--one">
                <div class="item filler__img--full filler__img--one"></div>
                <div class="item filler__img--full filler__img--four"></div>
            </div>
        </div>

        <script>

            $('.owl-carousel').owlCarousel({
                loop:true,
                center:true,
                autoWidth:true,
                margin:0,
                nav:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:3
                    },
                    1000:{
                        items:5
                    }
                }
            })

        </script>

        <div class="module__container--item tablet__adjust animatedParent animateOnce" style="display: flex; display: -webkit-flex;">
            <div class="filler__content--slider" style="margin-left: 0px !important;">
                <div class="standard__content filler__content filler__content--one animated fadeInRightShort delay-375">
                    <h3 style="text-align: left;">FILLER SECTION</h3>
                    <p class="h6 standard__content--text" style="font-weight: normal; text-align: left;">Short introduction of the client and description of the completed project. This should be anywhere from 3-5 lines. If longer, break into sections based on client background and project overview. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no.</p>
                </div>
            </div>
        </div>

    </div>

.filler__slider, .filler__slider .owl-stage-outer, .filler__slider .owl-stage-outer .owl-stage, .filler__slider .owl-stage-outer .owl-stage .owl-item {height: 100vw !important;}
.filler__slider .owl-stage-outer .owl-stage .owl-item {width: 100vw !important;}
.filler__slider .owl-nav {display: flex !important; margin-top: -50px !important;}
.filler__slider .owl-nav .owl-prev, .filler__slider .owl-nav .owl-next {z-index: 1000 !important;}
.filler__slider .owl-nav .owl-prev {transform: rotate(180deg);}
.filler__slider .owl-nav .owl-next {transform: rotate(0deg);}
.filler__slider {overflow: hidden !important;}

.filler__slider--one .owl-nav {justify-content: flex-end !important; padding-right: 30px;}
.filler__slider--four .owl-nav {justify-content: flex-start !important; padding-left: 30px;}
.filler__content {margin: auto !important; position: relative; padding-top: 20px; padding-bottom: 30px;}
.filler__img--full {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vw; width: 100%;}
.filler__img--one {background-image: url(images/template_filler_one.png);}
.filler__img--two {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 522px;
    margin: auto;
    position: relative;
    width: 85vw;
}
.filler__img--three {
    width: 516px;
    margin: auto;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 80vw;
}
.filler__img--four {background-image: url(images/template_filler_four.png); margin-top: 0px;}
.order__one {order: 2}
.order__two {order: 1}

.filler__content--slider {width: 100%; height: 100%; margin: auto; display: flex; display: -webkit-flex;}