javascript - Owl Carousel - 在导航按钮中间放置一个图像计数器

Question

我刚刚通过将 2966 和 2968 行更改为看起来像箭头，设计了 Owl Carousel 导航按钮“下一个”和“上一个”。

现在，我想添加一个 div，它将在导航按钮中间包含一个图像计数器。

这张图片可能会让你更清楚我在问什么:

问题是:

需要更改哪一行以便我可以在 owl.caroussel.js 中的导航按钮之间放置一些东西？

我试着放一些 h1 标签，这样我就可以在它们之间看到它，但没有用。

谢谢大家

Answer 1

我建议构建您自己的导航并隐藏默认的猫头鹰导航。然后，您可以触发此页面上记录的操作:

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

像这样你可以自由设计你的导航。

粗略示例，部分摘自文档并添加了一些内容:

// initialize without navigation:

var owl = $('.owl-carousel');
owl.owlCarousel({
    nav: false,
});

// trigger go to next item on your own next navigation button:

$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})

// trigger go to the previous item:

$('.customPrevBtn').click(function() {
    owl.trigger('prev.owl.carousel', [300]);
})

您的标记可能如下所示

<div class="gallery">
    <div class="owl-carousel"></div>
    <div class="navigation">
        <span>prev</span>
        <span>1/42</span>
        <span>next</span>
    </div>
</div>