Instead of:

<ul id="mycarousel" class="jcarousel-skin-tango"> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75"  
height="75" alt="" /></li> 
<li><img src=".jpg" width="75" 
height="75" alt="" /></li> 
<li><img src=".jpg" width="75"  
height="75" alt="" /></li> 
<li><img src=".jpg" width="75"  
height="75" alt="" /></li> 
</ul> 

I would like a carousel that uses DIV containers. The reason I need this is because I'm making a Tumblr theme, which for those who don't know is a blogging network where you post content on a "Dashboard" and the content is generated dynamically from Tumblr through tags. Lists like this do not have the ability to produce new tags for new content.

Instead of:

<ul id="mycarousel" class="jcarousel-skin-tango"> 
<li><img src="http://static.flickr./66/199481236_dc98b5abb3_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./75/199481072_b4a0d09597_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./57/199481087_33ae73a8de_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./77/199481108_4359e6b971_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./58/199481143_3c148d9dd3_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./72/199481203_ad4cdcf109_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./58/199481218_264ce20da0_s.jpg" width="75"  
height="75" alt="" /></li> 
<li><img src="http://static.flickr./69/199481255_fdfe885f87_s.jpg" width="75" 
height="75" alt="" /></li> 
<li><img src="http://static.flickr./60/199480111_87d4cb3e38_s.jpg" width="75"  
height="75" alt="" /></li> 
<li><img src="http://static.flickr./70/229228324_08223b70fa_s.jpg" width="75"  
height="75" alt="" /></li> 
</ul> 

I would like a carousel that uses DIV containers. The reason I need this is because I'm making a Tumblr theme, which for those who don't know is a blogging network where you post content on a "Dashboard" and the content is generated dynamically from Tumblr through tags. Lists like this do not have the ability to produce new tags for new content.

• javascript
• jquery
• html
• jcarousel

• you should be able to generate LIs dinamically just fine using loops in tumblr, if it still looks like Smarty. – Ricardo Tomasi Commented Mar 15, 2011 at 7:21

3 Answers 3

I have used both Nivo (mentioned earlier, http://nivo.dev7studios.) and jQuery Cycle plug-in, found at: http://jquery.malsup./cycle/

Both are good and work very well.

Nivo is slightly easier to set up but the thumbnails-pager option takes a bit more effort because the CSS modifications are not as clearly documented.

jQuery Cycle is more of a workhorse, and will handle not only images, but div's with structured content.

jQuery Cycle has plenty of examples to pick from, especially if you need pagers (whether index numbers or image thumbnails).

Check these out:

• http://slidesjs./
• http://nivo.dev7studios./

Here is a simple jQuery one. You could even change it to just images and rule out divs altogether. http://jsfiddle/QnkEm/4/
Updated to use the supplied images.