Owl 旋转木马 - 在导航按钮中间放置一个图像计数器

Question

我刚刚设计了 owl 轮播导航按钮“下一个”和“上一个”，方法是将 2966 行和 2968 行更改为看起来像箭头。

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

这张图片可能会让您更清楚地了解我在问什么：

问题是：

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

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

谢谢大家

Answer 1

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

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>

Owl 旋转木马 - 在导航按钮中间放置一个图像计数器

Owl caroussel - Put an image counter in middle of nav buttons

html

javascript

css

owl-carousel