owlCarousel 在页面加载时显示两张幻灯片，但在调整大小时显示一张

如何解决owlCarousel 在页面加载时显示两张幻灯片，但在调整大小时显示一张

我在我的页面上使用 Owl Slider，它在我页面的桌面视图中工作正常，但是当我在移动设备上查看我的页面时，在第一次加载时它总是一次显示两张幻灯片，

在调整屏幕或窗口大小时，它会变好并显示完美的视图。

 <div class="banner-container">
 <div id="banner-slider-demo-22" class="owl-carousel owl-banner-carousel" data-slider-id="1">
    <div class="item" style="background:url('MyUrl')  center center no-repeat;background-size:cover;">
        <div class="container" style="position:relative;height:532px;"> 
            <div class="content" style="position:absolute;z-index:1;top: 50%;left: 0;text-align: left;padding-left: 15px;transform: translateY(-50%);">
                <h2>neu im shop airride opel insignia a sports tourer</h2>
            </div>
        </div>
    </div>      
    
    <div class="item" style="background:url('MyUrl')  center center no-repeat;background-size:cover;">
        <div class="container" style="position:relative;height:532px;"> 
            <div class="content" style="position:absolute;z-index:1;top: 50%;left: 0;text-align: left;padding-left: 15px;transform: translateY(-50%);">
                <h2>neu im shop airride opel insignia a sports tourer</h2>
            </div>
        </div>
    </div>

 </div>
</div>

这是我正在使用的 JS：

 <script type="text/javascript">
require([
    'jquery','owlcarousel','owlcarousel_thumbs'
],function ($) {
    var banner_owl = $("#banner-slider-demo-22");
    banner_owl.owlCarousel({
        items: 1,autoWidth: false,autoplay: true,autoplayTimeout: 5000,autoplayHoverPause: true,dots: false,nav: false,navRewind: true,animateIn: 'fadeIn',animateOut: 'fadeOut',loop: true,navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],thumbs: true,thumbImage: false,thumbsPrerendered: true,thumbContainerClass: 'owl-thumbs',thumbItemClass: 'owl-thumb-item',responsive:{
                768:{
                    items:1,},}
    });
});
</script>

这是结果图像：

但是当我调整屏幕大小时，它会像这样：

任何快速解决方案？

解决方法

可能这会奏效，您需要按照此处的说明添加两个分手https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

<script type="text/javascript">
require([
    'jquery','owlcarousel','owlcarousel_thumbs'
],function ($) {
    var banner_owl = $("#banner-slider-demo-22");
    banner_owl.owlCarousel({
        items: 2,autoWidth: false,autoplay: true,autoplayTimeout: 5000,autoplayHoverPause: true,dots: false,nav: false,navRewind: true,animateIn: 'fadeIn',animateOut: 'fadeOut',loop: true,navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],thumbs: true,thumbImage: false,thumbsPrerendered: true,thumbContainerClass: 'owl-thumbs',thumbItemClass: 'owl-thumb-item',responsive:{
               0:{
                    items:1,},768:{
                    items:2,}
    });
});
</script>