jcarouselPagination：'page' 变量在调整大小时发生变化

Question

我有一个 jcarousel，里面有 3 个元素，唯一 ID (1,2,3)。在加载时，jcarouselPagination 项目完美运行并且它们获得了正确的目标 ("data-item=1,2,3")。

但是当我将屏幕调整为小型或微型媒体时，jcarouselPagination 项目无法正确定位。它们从 2 开始，结果为 ("data-item=2,3,4").

这是我创建分页项的 jquery 部分：

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>';
        }
    }
 );

我只在页面加载时调用此函数，从不在调整大小时调用此函数，所以我无法了解正在发生的事情！谢谢！

Answer 1

好的，所以我并没有真正弄清楚为什么它没有成功，或者为什么我的轮播在调整大小时一直生成分页项目.. 但似乎我不得不取消绑定 resize.jcarousel 功能如果有人感兴趣，这是我的新（和工作）代码！

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");

不确定这是绝对答案，但它确实有效！

jcarouselPagination：'page' 变量在调整大小时发生变化

jcarouselPagination : the 'page' variable change on resize

javascript

jquery

jcarousel