carouFredsel Responsive carousel with items:variable

0
votes

I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.

I managed to create a fiddle where I show:

1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown

2) an item image that gets resized according to the size of the screen

I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2. It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).

Is this possible ? What am I missing ?

http://jsfiddle.net/379zW/2/

var options = {
    circular: true,
    infinite: false,
    auto    : false,
    responsive: false,
prev    : {
    button  : "#p",
    key : "left"
},
next    : {
    button  : "#n",
    key : "right"
},
    width: '100%',
};

$("#carousel_123").carouFredSel(options);
1
javascriptjquerycsscaroufredsel

1 Answers

0
votes

This might solve your problem:

var options = {
    circular: true,
    infinite: false,
    auto: false,
    items: {
            width: '100%',
            height: 'variable',
            visible: {
                min: 1,
                max: 999
            }
    },
    responsive: false,
    prev: {
        button: "#p",
        key: "left"
    },
    next: {
        button: "#n",
        key: "right"
    },

    width: '100%',
};

$("#carousel_123").carouFredSel(options);