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

Question

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

调整屏幕大小或 window 它会变得很好并显示完美的视图。

 <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,
                    nav: false,
                },
          }
    });
});
</script>

这是结果图片：

但是当我调整屏幕大小时，它变得很好，如下所示：

有什么快速解决方案吗？

Answer 1

这可能会奏效，您需要按照此处所述添加两个拆分 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,
                    nav: false,
                },
                768:{
                    items:2,
                    nav: false,
                },
          }
    });
});
</script>

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

owlCarousel show two slides on page load, but on resize it show one

javascript

jquery

slider

owl-carousel