owl carousel - count inactive slides

Question

I have to make something like counter for unseen boxes. If i slide to end, counter should be '0'. If its just beginning counter should display only those i still didn't see (in example it should be 3)

I've made something similar, but have bugs in it, and just can't handle it

jquery or 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

I don't think you're using correct event, from this owl carousel's API docs , i think you should be using dragged event, eg:

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