Question

我有一个带有3个元素的jcarousel，里面有唯一的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：调整大小

1 个答案: