Geek Answers Handbook

Setting the number of visible images in jCarousel

I included jCarousel in my asp.net page, but always only showed 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; };
+4
source share
5 answers

try it

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

It is necessary to change both the width of the container and the clip ; and increase the number of elements 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; }
+5
source

Just change the CSS to:

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

[change the width to whatever you want]

+4
source

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

I could not find the width of the skin in my CSS file, so I could just skip something.

I figured this out by playing here: http://jsfiddle.net/xNjwh/168/ , going back to my old jQuery version and messing around with the following code:

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

Hi, actually not such an answer as an alternative. I spent some time on this problem myself, and eventually I decided to use another jQuery carousel, which offers much more customization options and is almost identical to its functions.

It allows you to specify your own CSS rules if you need for container elements, which is very important for most that I imagine.

jquery-carousel-lite

I have nothing to do with the developer Karl Svidberg. It is based on the source code of Ganesha Marvah.

Hope this helps someone.

Jimmy

0
source

More articles:


All Articles