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

score 10 · Answer 1 · answered Aug 24 '11 at 05:24

10

Try this

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

answered Aug 24 '11 at 05:24

Coomie

4,832
3
32
44

jQuery('#mycarousel').jcarousel({ visible: 3 }); if i set visible: 10 then it will show 10 picture at a time? – Thomas Aug 25 '11 at 06:25
That's what the documentation says – Coomie Aug 25 '11 at 07:00

score 5 · Answer 2 · answered Mar 28 '12 at 11:14

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

score 4 · Answer 3 · answered Aug 19 '11 at 14:53

4

Just change the CSS for:

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

[change the width to whatever you want]

answered Aug 19 '11 at 14:53

makeitmorehuman

11,287
3
52
76

Should note that's only for the default skin called `tango`. For another skin, the same edit would need to be made in the corresponding CSS. – Sparky Aug 19 '11 at 15:11
1

@XGreen, shouldn't you change `.jcarousel-skin-tango .jcarousel-clip-horizontal` as well ? – Istiaque Ahmed Oct 31 '12 at 08:20

score 0 · Answer 4 · answered Mar 25 '14 at 12:43

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

score 0 · Answer 5 · answered Jul 09 '15 at 11:01

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

Setting number of visible images in jCarousel

5 Answers5

Linked