Caroufredsel responsive visible items

Question

I am building a caroufredsel for a responsive website (with only 3 states: 960px, 720px and 320px). It's working great when you load the page in one of these states. It shows the correct number of items (3, 2 and 1 respectively). But, when you resize the window, the number of visible items doesn't change. I was thinking about a $(window).resize() call, but I can't find how you can adjust the Caroufredsel settings after it is initialized.

$('#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'
    }
});

Clemens Sum Clemens Sum · Accepted Answer · 2013-12-12T10:26:02

What you need to do in your resize-callback is the following:

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

Caroufredsel responsive visible items

2 Answers