javascript - Caroufredsel 响应式可见项目

Question

我正在为响应式网站构建一个 caroufredsel(只有 3 个状态:960px、720px 和 320px)。当您以这些状态之一加载页面时，效果很好。它显示正确的项目数(分别为 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'
    }
});

Answer 1

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

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