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

score 4 · Accepted Answer · answered Dec 12 '13 at 10:26

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

score 1 · Answer 2 · answered Dec 06 '13 at 13:09

1

If I'm not mistaken, don't you need "responsive:true," as one of the parameters?

answered Dec 06 '13 at 13:09

Forsh

53
1
6

Caroufredsel responsive visible items

2 Answers2