5

我正在为响应式网站构建一个 caroufredsel(只有 3 个状态:960px720px320px。当您在其中一种状态下加载页面时,它的效果很好。它显示了正确的项目数(分别为 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'
    }
});
4

2 回答 2

4

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

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);
}
于 2013-12-12T10:26:02.283 回答
1

如果我没记错的话,您不需要“responsive:true”作为参数之一吗?

于 2013-12-06T13:09:19.903 回答