owl 轮播 - 计算不活动的幻灯片

Question

我必须为看不见的盒子制作类似计数器的东西。如果我滑到最后，计数器应该是“0”。如果它刚开始的计数器应该只显示那些我还没有看到的（例如它应该是 3）

我做过类似的东西，但是里面有bug，就是处理不了

jquery 或 javascript https://jsbin.com/vifakamaha/edit?html,js,output

 var owl = $('.owl-carousel');
owl.owlCarousel({
        items: 4,
        responsive: {
            0 : {
                items: 1
            },
            500 : {
                items: 2
            },
            991 : {
                items: 3 
            },
            1200 : {
                items: 4
            },

        }
    });

    var nextAfterActive = $(".owl item.active").last().nextAll().length;
    $('.count').html(nextAfterActive);

owl.on('changed.owl.carousel', function(event) {
    var nextAfterActive = $(".owl-item.active").last().nextAll().length;
    $('.count').html(nextAfterActive);
})

Answer 1

我认为您使用的事件不正确，从这个 owl carousel's API docs，我认为您应该使用 dragged 事件，例如：

owl.on('dragged.owl.carousel', function(event) {
    var nextAfterActive = $(".owl-item.active").last().nextAll().length;
    $('.count').html(nextAfterActive);
})

https://jsbin.com/tejilacace/1/edit?html,js,output

owl 轮播 - 计算不活动的幻灯片

owl carousel - count inactive slides

javascript

jquery

owl-carousel