Owl 轮播自定义图像预览分页不起作用

Question

我正在看 this Yunus Gaziev 的巧妙创作，但它有一个主要问题 - 一旦您调整视口，分页就会被删除，这似乎是由 Owl，我也不知道为什么。

var owl;

$(document).ready(function() {
    owl = $("#owl-demo");
    owl.owlCarousel({
        navigation: false,
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: afterOWLinit
    });

    function afterOWLinit() {
        ...
    }

});

Answer 1

我试过调试 javascript 但找不到原因。我确实认为这种分页不是根据 owl.carousel.js

中视口的变化重新创建的

这是它尝试重新创建分页的地方

• base.updatePagination();
• base.checkNavigation();

看看吧。我希望这将帮助您和其他人找到根本原因。

Answer 2

问题是 owlCarousel 初始化程序需要声明 afterUpdate: afterOWLinit 以便每当调整视口大小时，它都会再次触发自定义分页脚本。

我已经彻底重构了现有代码，可以查看示例here - my version can be cloned from here。