html - 为什么当窗口调整大小时 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）。

例如，它是默认的 1349 像素（我的屏幕宽度）。但是当我将宽度更改为 1024 像素时，即使我只有 3 个滑块项目，猫头鹰项目的宽度也会变为 256 像素（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');
 }