如何让猫头鹰轮播的每个项目都有一个分页点

How do I make Owl Carousel have a pagination dot per item

本文关键字：项目 有一个 分页 猫头鹰      更新时间：2023-09-26

例如，如果：

owl.owlCarousel({
    items: 3,
    navigation: false,
    navigationText: ["<img src='img/left.png'>",'<img src="img/right.png">'],
    slideSpeed: 300,
    paginationSpeed: 400,
    afterInit: afterOWLinit // do some work after OWL init
});

如果我在我的轮播中说 12 个项目，就会有 4 个分页点。但是，我希望有 12 个点（每个项目 1 个）似乎没有办法选择它作为脚本的选项？

您有 4 个分页点，因为您在可见舞台上显示 3 个项目。如果将items:3更改为 1，那么您将有 12 个点，并且只有一个项目同时可见。

点表示可以切换的"页数"。如果同时有多个可见点，则为每个项目显示一个点是没有意义的

我刚才遇到了同样的问题。这就是我修复它的方式;

在owl.carousel.js中，ctr+f 表示if (i % base.options.items === 0) {

将此行更改为if (i % base.options.paginationItems === 0) {然后转到配置，并在下面添加items : 5, paginationItems : 5,

现在，在您的 init 脚本中，您可以将paginationItems : 1设置为每张图像有一个按钮，或者如果您想要一些不同的东西，例如显示 4 张图像但将它们分组为每 2 张一个按钮，您可以设置 items : 4 和 paginationItems : 2 .

希望这对您或至少将来的其他人有所帮助

编辑：

您还必须将if (index % base.options.items === 0 || index === lastItem) {（我的owl.carousel.js中的第 315 行）更改为 if (index % base.options.paginationItems === 0 || index === lastItem) {

相关文章：