Hello,
I don't know if I have the last version of Yahoo Carousel Component.
I have a problem with IE 7 when the array size is over than 100
elements, the scroll bar no show the thumbnails at 100 or more
positions . This problem no exist in Firefox. Do you know if this
problem exist at old version of Carousel.

My Carousel page is
http://www.iluana.com/galeria_ficha.asp?idgaleria=61

There are no problem when the size is minus than 100 elements.

Thank for your help and sorry for my english

---------------------

Hola. No sé si tengo instalada la última versión del Carrusel de
Yahoo. Tengo un problema con IE 7 cuando el scroll muestra más de 100
elementos. Los elementos superiores al 100 no aparecen. Si el tamaño
de la matriz es menor que 100 no hay problemas. La página donde
utilizo el carrusel es ésta.
http://www.iluana.com/galeria_ficha.asp?idgaleria=61

Gracias y un saludo

hello. i am having the above problem with the carousel.

my code:

var carousel = new
YAHOO.extension.Carousel("gallery-horizontal-carousel",
	     {
		     numVisible:        3,
             animationSpeed:    0.8,
             scrollInc:         1,
             size:              20,
             wrap:              true,
             autoPlay:          2500
	     }
	     );

carousel.setProperty('size',2,true);

this is my setup and it's giving me too much recursion problem. and
it's caused by
carousel.setProperty('size',2,true);

basically i just want it to wrap as soon as it loops through all the
li's. if i dont set size. it wraps at 10000000. if i do set the size
and if i have less item than the size. it shows blank spots.
please help.

Oh, I solved it... my problem was that I reload the data (not the
items) when a condition is true in the load function... and this
condition was wrong... Thank you!


--- In ycarousel@yahoogroups.com, "adrisalarfdez" <asalar@...> wrote:
>
> Ahh!! The code of my animationCompleteHandler is:
> var handleAnimationComplete = function(type, args) {
>  if (this.getFirstVisible() == 1) {
> 	 carousel.reload(this.getProperty("numVisible"));
> 	 this.startAutoPlay(this.getProperty("autoPlay"));
>  }
> };
>
> --- In ycarousel@yahoogroups.com, "adrisalarfdez" <asalar@> wrote:
> >
> > Hi,
> > I have a vertical carousel with autoPlay and wrap... and I need to
> > reload all the visible Items every time I'm going to show them...
> >
> > I can clear or reload all the carousel when it goes to my
> > animationCompleteHandler, checking if the index returning with
> > getFirstVisible() is 1...
> >
> > It works fine but it clear or reload all the items AFTER the first
> > visible items. These are the same always and the rest of the items are
> > changing correctly
> >
> > How can I solve it?
> >
> > Thank you.
> >
>

Sorry, it was wrong... the code of the handler is this:
(without this boolean it doesn't work)

var noPrime = false;

var handleAnimationComplete = function(type, args) {
	 if (this.getFirstVisible() == 1 && noPrime) {
		 this.reload(this.getProperty("numVisible"));
		 this.startAutoPlay(this.getProperty("autoPlay"));
		 noPrime = false;
	 }
	 else {
		 noPrime = true;
	 }
};



--- In ycarousel@yahoogroups.com, "adrisalarfdez" <asalar@...> wrote:
>
> Ahh!! The code of my animationCompleteHandler is:
> var handleAnimationComplete = function(type, args) {
>  if (this.getFirstVisible() == 1) {
> 	 carousel.reload(this.getProperty("numVisible"));
> 	 this.startAutoPlay(this.getProperty("autoPlay"));
>  }
> };
>
> --- In ycarousel@yahoogroups.com, "adrisalarfdez" <asalar@> wrote:
> >
> > Hi,
> > I have a vertical carousel with autoPlay and wrap... and I need to
> > reload all the visible Items every time I'm going to show them...
> >
> > I can clear or reload all the carousel when it goes to my
> > animationCompleteHandler, checking if the index returning with
> > getFirstVisible() is 1...
> >
> > It works fine but it clear or reload all the items AFTER the first
> > visible items. These are the same always and the rest of the items are
> > changing correctly
> >
> > How can I solve it?
> >
> > Thank you.
> >
>

Ahh!! The code of my animationCompleteHandler is:
var handleAnimationComplete = function(type, args) {
	 if (this.getFirstVisible() == 1) {
		 carousel.reload(this.getProperty("numVisible"));
		 this.startAutoPlay(this.getProperty("autoPlay"));
	 }
};

--- In ycarousel@yahoogroups.com, "adrisalarfdez" <asalar@...> wrote:
>
> Hi,
> I have a vertical carousel with autoPlay and wrap... and I need to
> reload all the visible Items every time I'm going to show them...
>
> I can clear or reload all the carousel when it goes to my
> animationCompleteHandler, checking if the index returning with
> getFirstVisible() is 1...
>
> It works fine but it clear or reload all the items AFTER the first
> visible items. These are the same always and the rest of the items are
> changing correctly
>
> How can I solve it?
>
> Thank you.
>

Hi,
I have a vertical carousel with autoPlay and wrap... and I need to
reload all the visible Items every time I'm going to show them...

I can clear or reload all the carousel when it goes to my
animationCompleteHandler, checking if the index returning with
getFirstVisible() is 1...

It works fine but it clear or reload all the items AFTER the first
visible items. These are the same always and the rest of the items are
changing correctly

How can I solve it?

Thank you.

Have you done what you said? I have a similar problem... I need to
replace items... so I can remove items for adding some new...

Can someone help me, please?

Thank you

--- In ycarousel@yahoogroups.com, "tpthaler" <tpthaler@...> wrote:
>
> Hello,
>
>
>      I've been building an admin interface (AJAX'Y) that dynamically
> adds images to the carousel using the wonderful insertBefore and
> insertAfter methods, but there is no remove method.... I could really
> use this, and I am about to try and figure out how to write my own but
> if someone has already done this it would be greatly appreciated if
> you could share your code!
>
> Thanks,
> Tim
>

As you know, the intent of my carousel component was to fill in a gap
in the YUI library. In 2006, I created the ycarousel component. Many
people have found it useful over the last 2 years.

On October 1, 2008 Yahoo! announced the release of YUI 2.6.0. This
release contained the official YUI Carousel component.

Before I left Yahoo! in 2007, I spent some time with the YUI team,
discussed the ideas behind the way I approached my component, what I
liked about it and more importantly what I did not like about it :-)

The newly released YUI component shares some of the same
properties/api with my component but has been written from the ground
up. In 2006 when I wrote the carousel there were some features in YUI
that are available now that weren't then. So I am excited about their
new carousel and encourage everyone to migrate to it instead of using
my carousel.

The fact is you will get better support for their component. I am just
too busy with other projects to really support it the way I would like
and there is just no reason to cloud the space with two components
(named similarly ;-)

You can find the new YUI Carousel component here:
http://developer.yahoo.com/yui/carousel/

--
Bill Scott

Hello,

I am using the Carousel on a client site and it is working nicely.

We have autoPlay set and wrap is set to true.  We have five items in
the carousel.  When the last item finishes, the Carousel does
a "rewind" effect back to the first item.

Is there a way to turn this effect off?  We would like to go from item
5 to Item 1 with the same animationMethod that is used during the other
scrolls.

Thanks

Heyho,

okay, so this question's probably very easy to answer and you all
going to blame why I didn't search on the Internet prior to posting,
but I did and didn't find a solution.

Problem should be simple: I want my carousel to work like the
"Spotlight" example
(http://billwscott.com/carousel/carousel_spotlight.html), but the
carousel having another width (in my case 750px).

The spotlight thing works great, but the size of my carousel is way
too big.

First thing I did was to set the size of all the containers via CSS to
750px, but that had no effect. Actually, to me it seems that the only
thing that changes the size is either how big I set the "li" items
(should be 175px, 125px image width +25px margin on left/right, no
borders) or what value I hand over to the "numVisible" attribute.
Setting the numVisible to a number like ~3 almost gets me to where I
want, the carousel has almost the correct size now - but the
highlighted image's not in the middle of the carousel anymore.
I read through the documentation several times now, looked up the
newsgroup and asked Google, but I didn't find a solution so far =/.

So what I want is that the carousel is exactly 750px wide and the
spotlighted image should be in the middle. Any suggestions?

CSS:
.carousel-component {
     width: 750px;
     height: 139px;
     padding:0px;
}

.carousel-component .carousel-list li {
     margin-left:25px;
     margin-right:25px;
     width: 175px;
     height: 139px;
     /*    margin-left: auto;*/ /* for testing IE auto issue */
}

.carousel-component .carousel-list li a {
     display:block;
     /* margin:3px; */
     outline:none;
     -moz-outline:none;
}

.carousel-component .carousel-list li a:hover {

}

.carousel-component .carousel-list li img {
     display:block;
     margin:4px 0px 0px 4px;
}

.carousel-component .carousel-list li strong {
     display:block;
}

.spotlight {
     filter: alpha(opacity=100); -moz-opacity:1.0;
}

.non-spotlight {
     filter: alpha(opacity=60); -moz-opacity:0.6;
}

Javascript:
<script type="text/javascript">

var priorCenterItem = 1;

/**
  * Image src URLs
  **/
var imageList = [
                  "images/subnav_praxen.jpg",
                  "images/subnav_karriere.jpg",
                  "images/subnav_vertretungen.jpg",
                  "images/subnav_weiterbildung.jpg",
                  "images/subnav_kooperation.jpg"
                  ];
var urlList = [
                  "images/subnav_praxen.jpg",
                  "images/subnav_karriere.jpg",
                  "images/subnav_vertretungen.jpg",
                  "images/subnav_weiterbildung.jpg",
                  "images/subnav_kooperation.jpg"
                  ];

var lastRan = -1;

/**
  * Since carousel.addItem uses an HTML string to create the interface
  * for each carousel item, this method formats the HTML for an LI.
  **/

var fmtItem = function(imgUrl, url, title, i) {
       var innerHTML =
           '<img id="carousel-image-' + i + '" src="' +
           imgUrl +
         '" width="' +
         125 +
         '" height="' +
         139+
         '"/>';
         /* <a id="carousel-anchor-' + i + '" href="' +
           url +
           '">' +
           title + '<\/a>'; */

     return innerHTML;

};

/**
  * Custom inital load handler. Called when the carousel loads the initial
  * set of data items. Specified to the carousel as the configuration
  * parameter: loadInitHandler
  **/
var loadInitialItems = function(type, args) {
     var start = args[0];
     var last = args[1];

     load(this, start, last);
     spotlight(this);
     preview(this);
};

/**
  * Custom load next handler. Called when the carousel loads the next
  * set of data items. Specified to the carousel as the configuration
  * parameter: loadNextHandler
  **/
var loadNextItems = function(type, args) {
     // get the last middle item and turn off spotlight
     var li = this.getItem(priorCenterItem);

     var start = args[0];
     var last = args[1];
     var alreadyCached = args[2];

     if(!alreadyCached) {
         load(this, start, last);
     }
     spotlight(this);
     preview(this);
};

/**
  * Custom load previous handler. Called when the carousel loads the
previous
  * set of data items. Specified to the carousel as the configuration
  * parameter: loadPrevHandler
  **/

var loadPrevItems = function(type, args) {
     // get the last middle item and turn off spotlight
     var li = this.getItem(priorCenterItem);

     var start = args[0];
     var last = args[1];
     var alreadyCached = args[2];

     if(!alreadyCached) {
         load(this, start, last);
     }
     spotlight(this);
     preview(this);
};

var load = function(carousel, start, last) {

     for(var i=start;i<=last;i++) {
         // var randomIndex = getRandom(18, lastRan);
         // lastRan = randomIndex;
         carousel.addItem(i, fmtItem(imageList[i], urlList[i], "Number
" + i, i), 'non-spotlight');

         // Image click will scroll to the corresponding carousel item.
         YAHOO.util.Event.addListener('carousel-image-'+i, 'click',
function(evt) {
             this.carousel.scrollTo(this.index-2);
         }, {carousel:carousel,index:i}, true);
/*
         // Example of an alternate way to add an item (passing an
element instead of html string)
         var p = document.createElement("P");
         var t = document.createTextNode("Item"+i);
         p.appendChild(t);
         carousel.addItem(i, p );
*/
     }
};

var getRandom = function(max, last) {
     var randomIndex;
     do {
         randomIndex = Math.floor(Math.random()*max);
     } while(randomIndex == last);

     return randomIndex;
};

/**
  * Custom button state handler for enabling/disabling button state.
  * Called when the carousel has determined that the previous button
  * state should be changed.
  * Specified to the carousel as the configuration
  * parameter: prevButtonStateHandler
  **/
var handlePrevButtonState = function(type, args) {

     var enabling = args[0];
     var leftImage = args[1];
     if(enabling) {
         leftImage.src = "images/subnav_leftarrow.jpg";
     } else {
         leftImage.src = "images/subnav_leftarrow.jpg";
     }

};

/**
  * Custom button state handler for enabling/disabling button state.
  * Called when the carousel has determined that the next button
  * state should be changed.
  * Specified to the carousel as the configuration
  * parameter: nextButtonStateHandler
  **/
var handleNextButtonState = function(type, args) {

     var enabling = args[0];
     var rightImage = args[1];
     if(enabling) {
         rightImage.src = "images/subnav_rightarrow.jpg";
     } else {
         rightImage.src = "images/subnav_rightarrow.jpg";
     }

};

function completeHandler(type, args) {
     // instead of doing the preview in the loadNext and loadPrev you can
     // wait for the animation scroll to stop before showing the preview
     //preview(this);
}
function preview(carousel) {
     var firstVisible = carousel.getProperty("firstVisible");
     var middle = firstVisible + 2;

     var anchor = YAHOO.util.Dom.get('carousel-anchor-' + middle);
     YAHOO.util.Dom.get('preview').innerHTML = '<img src="' +
anchor.href + '"/>';
}

function spotlight(carousel) {
     var firstVisible = carousel.getProperty("firstVisible");
     var start = firstVisible;
     var revealAmount = carousel.getProperty("revealAmount");
     var size = carousel.getProperty("size");

     if(revealAmount && firstVisible > 1) {
         start = firstVisible - 1;
     }
     var lastVisible = firstVisible +
carousel.getProperty("numVisible") - 1;
     var end = lastVisible;
     if(revealAmount && lastVisible < size) {
         end = lastVisible + 1;
     }

     var middle = firstVisible + 2;

     for(var i=start; i<=end; i++) {
         var li = carousel.getItem(i);

         if(i == middle) {
             YAHOO.util.Dom.replaceClass(li, 'non-spotlight', 'spotlight');
             priorCenterItem = i;
         } else {
             YAHOO.util.Dom.replaceClass(li, 'spotlight', 'non-spotlight');
         }
     }
}

/**
  * You must create the carousel after the page is loaded since it is
  * dependent on an HTML element (in this case 'dhtml-carousel'.) See the
  * HTML code below.
  **/

var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
     carousel = new YAHOO.extension.Carousel("carousel_service",
         {
             numVisible:         5,
             animationSpeed:     0.6,
             animationMethod:    YAHOO.util.Easing.backBoth,
             scrollInc:          1,
             navMargin:          40,
             scrollBeforeAmount: 2,
             firstVisible:       -1,
             size:               5,
             scrollAfterAmount:  2,
             prevElement:        "prev-arrow",
             nextElement:        "next-arrow",
             loadInitHandler:    loadInitialItems,
             loadNextHandler:    loadNextItems,
             loadPrevHandler:    loadPrevItems,
             prevButtonStateHandler:   handlePrevButtonState,
             nextButtonStateHandler:   handleNextButtonState,
             animationCompleteHandler: completeHandler
         }
     );

     //carousel.loadNextHandlerEvt.subscribe(beforeNext, carousel);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);

HTML:
<div id="carousel_service" class="carousel-component">
     <div class="carousel-clip-region">
         <ul class="carousel-list">
             <!-- Filled in via the loadInitHandler, loadNextHandler,
and loadPrevHandler
             <li id="item-1">
             <a href="#">
                 <img
src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg"/>
             </a>Number One</li>
             -->
         </ul>
     </div>
</div>

Well, thank you. Your answer was an excellent pointer and that will
help me accomplish what I am set to do (with the info from firebug, I
am able to see the response clearly. I am able to get it from databse,
but I was not sure on how to present it for reading). So after all, it
paid off to have posted here :-)

I see that you are the developer himself. Thanks also for this
excellent script.

--- In ycarousel@yahoogroups.com, "billwaynescott"
<billwaynescott@...> wrote:
>
> This is outside the topic of the carousel. You are asking a general
programming question
> about how to use ajax, php and your database.
>
> Try this:
> http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php
>
> The getTrips.php is an example file I included. It gets the trips
back from the Trip Planner
> APIs
(http://developer.yahoo.com/travel/tripservice/V1.1/tripSearch.html)
>
> The result is returned as JSON.
>
> You can use Firebug in Firefox (the Net tab, subtab: XHR) to see the
JSON being returned.
> You can also set a breakpoint in the javascript code to look at the
json object returned.
>
> --
> Bill Scott
>
>
> --- In ycarousel@yahoogroups.com, "angegardienusa" <angegardien@> wrote:
> >
> > No one can help me? Please ...
> >
> >
> > --- In ycarousel@yahoogroups.com, "angegardienusa" <angegardien@>
> > wrote:
> > >
> > > Hello, Can someone please point me to the right direction to use
Ajax
> > > with my own database?
> > >
> > > The getTrips.php does not tell me much on how the results is
> > > formatted. I can get URL, Titlle and Image easily from db, but
how do
> > > echo it back? What's in $filecontents?
> > >
> >
>

This is outside the topic of the carousel. You are asking a general programming
question
about how to use ajax, php and your database.

Try this:
http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php

The getTrips.php is an example file I included. It gets the trips back from the
Trip Planner
APIs (http://developer.yahoo.com/travel/tripservice/V1.1/tripSearch.html)

The result is returned as JSON.

You can use Firebug in Firefox (the Net tab, subtab: XHR) to see the JSON being
returned.
You can also set a breakpoint in the javascript code to look at the json object
returned.

--
Bill Scott


--- In ycarousel@yahoogroups.com, "angegardienusa" <angegardien@...> wrote:
>
> No one can help me? Please ...
>
>
> --- In ycarousel@yahoogroups.com, "angegardienusa" <angegardien@>
> wrote:
> >
> > Hello, Can someone please point me to the right direction to use Ajax
> > with my own database?
> >
> > The getTrips.php does not tell me much on how the results is
> > formatted. I can get URL, Titlle and Image easily from db, but how do
> > echo it back? What's in $filecontents?
> >
>

No one can help me? Please ...


--- In ycarousel@yahoogroups.com, "angegardienusa" <angegardien@...>
wrote:
>
> Hello, Can someone please point me to the right direction to use Ajax
> with my own database?
>
> The getTrips.php does not tell me much on how the results is
> formatted. I can get URL, Titlle and Image easily from db, but how do
> echo it back? What's in $filecontents?
>

Hello, Can someone please point me to the right direction to use Ajax
with my own database?

The getTrips.php does not tell me much on how the results is
formatted. I can get URL, Titlle and Image easily from db, but how do
echo it back? What's in $filecontents?

Hi,

I am using the carousel to add items from Ajax. If I do it setting a
fixed array of image urls, it works just fine, but when I make an Ajax
request, in the callback method I try to add each of the returned
items in the carousel. The carousel width becomes equal to zero.

	 _renderThumbnailImages: function(mainResultObject)
	 {
		 // Get the start and end indexes & carouselObject from the result
object.
		 var startIndex = mainResultObject.argument.startIndex;
		 var endIndex = mainResultObject.argument.endIndex;
		 var carouselObj = mainResultObject.argument.carouselObj;


// To make this simple, I don't interact with the results from Ajax.
The carousel items are never rendered :(


		 // Add the thumbnail information for each site.
		 for (var itemIndex = startIndex; itemIndex <= endIndex; itemIndex ++) {
			 if (itemIndex >= 1 && itemIndex <= this.totalNumberOfItems) {
				 carouselObj.addItem(itemIndex, "<img src='foo.jpg'");
			 }
		 }

	 }


Has anyone seen this problem?

Thanks,

Ulises.

I figured what the problem is. I was adding the items wrong.

Instead of doing this:

mycarousel.addItem(index, foo());

I was doing this:

mycarousel.addItem(some_string_var + index, foo());

That solved my problem.

addItem needs the index, and I was passing a string that was something
like "myitem-1".

Hi,

I am trying to use the loadNextItems and loadPrevItems. Both functions
are called when I click on the links, however the alreadyCached is
always false. How do you set it to true?

Hi Bill,

I am creating my carousel like this:

carousel = new YAHOO.extension.Carousel("mycarousel",
     {
         numVisible: 3,
         animationSpeed: 0.4,
         loadInitHandler: loadInitialItems,
         scrollInc: 3,
         prevElement: "prev-arrow",
         nextElement: "next-arrow",
         loadNextHandler:   loadNextItems,
         loadPrevHandler:   loadPrevItems
     });

My loadInitialItems function looks like this:
function loadInitialItems(type, args) {
     getStyles(_page, _recsPerPage);
}

It gets the data from the database and calls this callback function:

function getStyles_Callback(result, eventArgs) {

     for (var i = 0; i < result.length; i++) {
         carousel.addItem(_liIdentifier + _lastIndex,
getStyleImage(result[i].Style));
         _lastIndex = _lastIndex + 1;
     }

}

The problem is now that I can see 3 empty items in the carousel. If I
go to the next page via the carousel buttons, then I can see the
items. I already debugged the function. Any idea why there are 3 empty
items in the beginning?

wow, i actually got it to work... each of my tab buttons has an ID
already, so i simply added the following lines at the bottom of the
carousel script in the head of the document:

YAHOO.util.Event.addListener("cardsImage", 'click', pageLoad);

and

YAHOO.util.Event.addListener("websitesImage", 'click', pageLoad);

this reloads everything each time one of the two tabs with the
carousels in is clicked on. it may not be the neatest way of doing it
i guess but seems to work without any delay.

thanks again, this is by far the best carousel i found online, i went
through 2 others first and was pulling my hair out! one final thing i
wondered, although not crucial: is there a way to specify the width of
the viewable area of the carousel and eliminiate the numVisible
property? i dont want the width to be based on how many items, but on
the width of my page, as i actually really like the effect of seeing
one item disappearing to the right.

--- In ycarousel@yahoogroups.com, "kylelondon85" <kylelondon85@...> wrote:
>
> Hi, thanks so much for quick help. i don't think i quite understand
> how to use "methods" for the carousel though. if i was to add a
> function to the onclick property of my buttons (e.g.
> onclick="showCarousel();"
>
> what kind of information would i need to put into that function to
> make it work? could it just be the "show()" method? so:
>
> function showCarousel {
> carousel.show();
> }
>
> if that's even half right i'd be impressed since i know nothing at all
> about javascript! :oS
>
>
> --- In ycarousel@yahoogroups.com, "billwaynescott"
> <billwaynescott@> wrote:
> >
> > Having never used Spry I am at a disadvantage to answer.
> >
> > However, a quick search had this discussion about getting the
> onclick event on the tab:
> > http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?
> > forumid=72&catid=602&threadid=1376806&highlight_key=y&keyword1=tabbed
> >
> > You basically want to have an event handler fire when the tab is
> selected and do the show
> > from there.
> >
> > --
> > Bill Scott
> >
> > --- In ycarousel@yahoogroups.com, "kylelondon85" <kylelondon85@>
wrote:
> > >
> > > Hi,
> > >
> > > i have a page that uses Adobe's Spry Tabbed Panels widget to
display 3
> > > different sets of content under 3 tabs. two of those have this
> > > carousel feature running on them. when i load the page,
whichever tab
> > > i have set to be open shows the carousel fine, but when i click to
> > > view the other tab with the other carousel, the carousel doesnt
load.
> > > i know this is because of the Spry javascript setting content to
> > > invisible, and then the carousel not reloading when i choose to
switch
> > > tabs...
> > >
> > > Having looked around i see that i need to call show() somehow to
> > > reload and recalculate the carousel, but i'm at a loss as to where i
> > > need to put show() to make this work. do i somehow integrate it into
> > > the tabbed panel buttons?
> > >
> > > for ease here is the link to the page i'm talking about:
> > >
> > > http://www.createdesigns.co.uk/newsite/showcase.html
> > >
> > > any help would be greatly appreciated!
> > >
> > > Kyle
> > >
> >
>

You are right. There was something messed up with my code.

Thanks for pointing to the example.

Hi Bill,

I understand that it must contain LI items to load static content. I
am trying to load the items via ajax, which works fine, if I include a
static LI into the carousel. If I dont add the static LI, then I cant
even see the dynamic added items.