javascript - Caroufredsel响应式可见项目

我正在为一个响应式网站(只有3个状态:960px，720px和320px)构建caroufredsel。
当您在其中一种状态下加载页面时，它的工作效果很好。它显示正确数量的项目(分别为3、2和1)。
但是，当您调整窗口大小时，可见项目的数量不会改变。我在考虑$(window).resize()调用，但是在初始化后，我找不到如何调整Caroufredsel设置的方法。

$('#caroufredsel').carouFredSel({
    infinite: true,
    auto: false,
    pagination: false,
    prev: {
        button: '#prev',
        key: 'left'
    },
    swipe: {
        onTouch: true,
        onMouse: true
    },
    next: {
        button: '#next',
        key: 'right'
    },
    items: {
        visible: 'variable'
    }
});

最佳答案

在调整大小的回调中，您需要执行以下操作:

var $carouselContainer = $('#caroufredsel');
var resizeCallback = function() {
    var showThatManyItems = 3; // determine the number of items to be shown depending on viewport size
    $carouselContainer.trigger('configuration', [
        'items', {
            visible : showThatManyItems
        }
    ], true);
}

关于javascript - Caroufredsel响应式可见项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19996394/