当窗口调整大小时，为什么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',
})

它适用于我的默认窗口宽度。但是，当我调整页面大小时，它会自动更改owl-item宽度。 （我发现它来自javascript）。

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

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');
 }