# Jquery dynamically loaded jcarousel, items shown

**URL:** <https://forum.kirupa.com/t/jquery-dynamically-loaded-jcarousel-items-shown/253264>\
**Category:** Uncategorized\
**Created:** [February 28, 2008, 5:30pm UTC](https://forum.kirupa.com/t/jquery-dynamically-loaded-jcarousel-items-shown/253264 "2008-02-28T17:30:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![somnamblst](https://avatars.discourse-cdn.com/v4/letter/s/a4c791/32.png) [@somnamblst](https://forum.kirupa.com/u/somnamblst)\
**Post date:** [February 28, 2008, 5:30pm UTC](https://forum.kirupa.com/t/jquery-dynamically-loaded-jcarousel-items-shown/253264/1 "2008-02-28T17:30:27Z")

</div>

I am trying to increase the number of items shown by the carousel as increasing the width with the dynamic javascript version does not increase the number of items.  
[http://sorgalla.com/projects/jcarousel/examples/dynamic\_javascript.html](http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html)

I am thinking it might be in the area of

[FONT=Arial]size: mycarousel\_itemList.length,[/FONT]  
[SIZE=2][FONT=Arial] itemLoadCallback: {onBeforeAnimation: mycarousel\_itemLoadCallback}[/FONT][/SIZE]

[URL=“[http://sorgalla.com/projects/jcarousel/examples/dynamic\_javascript.html](http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html)”]

```auto

[FONT=Arial][SIZE=2][FONT=Arial]var mycarousel_itemList = [[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]];[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] [/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]function mycarousel_itemLoadCallback(carousel, state)[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]{[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] for (var i = carousel.first; i <= carousel.last; i++) {[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] if (carousel.has(i)) {[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] continue;[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] }[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] [/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] if (i > mycarousel_itemList.length) {[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] break;[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] }[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] [/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] }[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]};[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] [/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]/**[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] * Item html creation helper.[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] */[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]function mycarousel_getItemHTML(item)[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]{[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]};[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] [/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]jQuery(document).ready(function() {[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] jQuery('#mycarousel').jcarousel({[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] size: mycarousel_itemList.length,[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial] });[/FONT][/SIZE][/FONT]
[FONT=Arial][SIZE=2][FONT=Arial]});[/FONT][/SIZE][/FONT]

```