jcarouselPagination : the 'page' variable change on resize

Question

I have a jcarousel with 3 elements inside with unique id (1,2,3). On load, the jcarouselPagination items work perfectly and they got the right targeter ("data-item=1,2,3").

But when I resize my screen to small or tiny media, the jcarouselPagination items don't target correctly. They start at 2 resulting in ("data-item=2,3,4").

Here is my jquery part where pagination items are created:

if ($(".ce_jcarousel").length == 0) {
    return;
}
$('.ce_jcarousel').jcarousel();
$('.cejcarousel-pagination')
    .on('cejcarouselpagination:active', 'a', function () {
        $(this).addClass('active');
    })
    .on('cejcarouselpagination:inactive', 'a', function () {
        $(this).removeClass('active');
    })
    .jcarouselPagination({
        'item': function (page, carouselItems) {
            return '<a data-item="'+ page  +'" class="slider_ce_text ' + (page == 1 ? "active" : "") + '" href="#' + page + '"><div class="grey_dot"></div></a>';
        }
    }
 );

I only call this function on page load, never on resize, so i have trouble getting what is happening! Thanks!

Answer 1

Ok, so i didn t really figured out why it didn t work out or why my carousel kept generating pagination items on resize.. But it seems that I had to unbind the resize.jcarousel function so here is my new (and working) code if anyone is interested!

if ($(".ce_jcarousel").length == 0) {
return;
}
jcarousel.jcarousel({
    wrap: 'circular'
});
$(window).unbind('resize.jcarousel');
$('.cejcarousel-pagination')
        .on('jcarouselpagination:active', 'a', function () {
            $(this).addClass('active');
        })
        .on('jcarouselpagination:inactive', 'a', function () {
            $(this).removeClass('active');
        })
        .jcarouselPagination({
            perPage: 1,
            item: function (page) {
                return '<a data-item="' + page + '" class="slider_ce_text" href="#' + page + '"><div class="grey_dot"></div></a>';
            },
        });

window.onload = $("[data-item = '1']").addClass("active");

Not sure that it's the absolute answer but it works!