Caroufredsel 响应可见项目答案

【问题标题】：Caroufredsel responsive visible itemsCaroufredsel 响应可见项目
【发布时间】：2013-12-12 18:26:02
【问题描述】：

我正在为响应式网站构建一个 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'
    }
});

【问题讨论】：

标签： javascript jquery variables responsive-design caroufredsel

【解决方案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);
}

【讨论】：

【解决方案2】：

如果我没记错的话，你不需要“responsive:true”作为参数之一吗？

【讨论】：