为什么owl-carousel在窗口调整大小时自动更改项目宽度

Question

我对owl-carousel 2有一个问题。以下是我的js代码:

 $(".top_slider").owlCarousel({
    items:1,
    navigation: true,
    navigationText: ['<div class="top_nav prev"><i class="fa fa-angle-left">    </i></div>', '<div class="top_nav next"><i class="fa fa-angle-right"></i></div>'],
    loop: true,
    animateOut: 'fadeOut',
})

它适用于我的默认窗口宽度。但是，当我调整页面大小时，它会自动改变条目宽度。(我发现它来自javascript)。

例如，它是默认的1349px(我的屏幕宽度)。但是当我将宽度更改为1024px时，即使我只有3个滑块项，owl-item的宽度也会变为256px(1024/4)。问题是什么，我该如何解决?谢谢你的帮助。

Answer 1

window.addEventListener('resize', refreshOwl);
function refreshOwl() {
        let projectWidth = $(window).width();
        slidesPerPage = projectWidth/3;
        let options = $('.owl-carousel').data('owl.carousel').options;
        options.items = slidesPerPage;
        $('.owl-carousel').trigger('refresh.owl.carousel');
 }