猫头鹰轮播在我的产品滑块中未显示分页编号答案

【问题标题】：owl carousel not showing pagination number in my product slider猫头鹰轮播在我的产品滑块中未显示分页编号
【发布时间】：2020-10-13 22:18:35
【问题描述】：

我的 owl carousel 滑块中有 15 个产品，每个滑块有 5 个产品，所以我想展示单击下一个或上一个分页数时每张幻灯片上的分页数应该改变，但我不知道我必须在哪里更改

我想要下图这样的分页

这是我的代码

$("#hottest-selling-items .owl-carousel").owlCarousel({
                    autoplay: false,
                    autoplayTimeout: 5000,
                    /*autoplayHoverPause: true,*/
                    margin: 0,
                    slideBy: 5,
                    nav: true,
                    navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],
                    dots: true,
                    loop: false,
                    responsive: {
                        0: {
                            items:2
                        },
                        640: {
                            items:3
                        },
                        768: {
                            items:4
                        },
                        992: {
                            items:5
                        },
                        1200: {
                            items:5
                        }
                    }
                });

【问题讨论】：

标签： jquery pagination owl-carousel

【解决方案1】：

HTML：

<div class="" id="hottestSellingCount"></div>

jQuery:

$("#hottest-selling-items .owl-carousel").owlCarousel({
autoplay: false,
autoplayTimeout: 5000,
/*autoplayHoverPause: true,*/
margin: 0,
slideBy: 5,
nav: true,
navText: ["<em class='porto-icon-left-open-big'></em>", "<em class='porto-icon-right-open-big'></em>"],
dots: true,
loop: false,
responsive: {
    0: {
        items: 2
    },
    640: {
        items: 3
    },
    768: {
        items: 4
    },
    992: {
        items: 5
    },
    1200: {
        items: 5
    }
},
onInitialized: counter, //When the plugin has initialized.
onTranslated: counter // When the translation of the stage has finished.
});
function counter(event) {
    var element = event.target;         // DOM element, in this example .owl-carousel
    var items = event.item.count;     // Number of items
    var item = event.item.index + 1;     // Position of the current item

// it loop is true then reset counter from 1
if (item > items) {
    item = item - items
}
$('#hottestSellingCount').html(item + "of" + items)

}

【讨论】：