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

您需要在resize-callback中执行以下操作：

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

Answer 2

如果我没弄错，你不需要“响应：真实”，作为其中一个参数吗？

Caroufredsel响应可见物品

2 个答案: