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