猫头鹰Caroussel-将图片计数器放在导航按钮的中间

Question

我刚刚通过将2966和2968线更改为箭头形状来设计了猫头鹰caroussel导航按钮“下一个”和“上一个”。

现在，我要添加一个div，该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>