Setting number of visible images in jCarousel

Question

I integrated jCarousel into my asp.net page but it's always showing only 3 images at a time. If I need to show 10 images at a time, then what should I change in the code?

Here is my little snippet:

jQuery(document).ready(function () {
    jQuery('#mycarousel').jcarousel({
        size:5,
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});

function mycarousel_getItemHTML(mother) {
    var item = "<div>";
    item += "<img src='" + mother.Image + "' width='75' height='75' />";
    item += "</div>";
    item += "<div>" + mother.Title + "</div>";
    return item;
};

Answer 1

Try this

jQuery('#mycarousel').jcarousel({
    visible: 3
});

Answer 2

Just change the CSS for:

.jcarousel-skin-tango .jcarousel-container-horizontal

[change the width to whatever you want]

Answer 3

I recently ran across the same problem. It turns out that if you have an earlier version of jQuery it will default to three items no matter what your visibility is set to.

I could not find the skin widths in my CSS file though, so I could just be missing something.

I figured this out by playing with it here: http://jsfiddle.net/xNjwh/168/ , reverting to my older jQuery version, and messing with the following code:

jQuery('#mycarousel').jcarousel({visible: 4});

Answer 4

Need to change both width of container & clip; & increase item numbers by visible: 10

JS

jQuery('#mycarousel').jcarousel({
    visible: 10
});

CSS

.jcarousel-skin-ie7 .jcarousel-container-horizontal
{
    width:750px;
}

.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
    width:740px; 
}

Answer 5

Hi not really an answer as such more of an alternative. I spent some time on this issue myself and my eventual solution was to use a different jQuery carousel plugin instead which offers much more in the way of customisation and is almost identical in its features.

It allows you to specify your own css rules if you need to for the container items which is pretty essential to most I imagine.

jquery-carousel-lite

I'm not associated with the developer Karl Sweedberg in any way. Its based on the original code by Ganeshji Marwaha.

Hope it helps someone.

Jimmy