Is there a carousel that uses DIV containers for separate content instead of lists?

Earl Larson picture Earl Larson · Mar 15, 2011 · Viewed 7.9k times · Source

Instead of:

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

Answer

Marc Audet picture Marc Audet · Mar 15, 2011

I have used both Nivo (mentioned earlier, http://nivo.dev7studios.com) and jQuery Cycle plug-in, found at: http://jquery.malsup.com/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).