3

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.

Earl Larson
  • 5,051
  • 6
  • 27
  • 29

3 Answers3

4

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).

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • Would it be able to generate a new slide for dynamically loaded content? – Earl Larson Mar 15 '11 at 07:02
  • And each slide would have to be able to hold things like text, music players, etc.. I need it for a Tumblr theme idea. – Earl Larson Mar 15 '11 at 07:04
  • jQuery Cycle handles **non-image content** quite well as demonstrated at http://jquery.malsup.com/cycle/int2.html (see example towards bottom of page) – Marc Audet Mar 15 '11 at 14:02
  • This is great, it's one of the best carousels I've come across... However, I don't see an option to place controls on the non-image content slide. I tried but it just keeps scrolling to the right. Any way to do this? – Earl Larson Mar 15 '11 at 15:03
  • Well I figured it out, but I want the scroll right feature... It seems the scroll right is automatic. You can use the fade animation on non-image content but the scroll right animation just keeps on going. Anyway to disable this? – Earl Larson Mar 15 '11 at 15:11
  • Nevermind! Haha wow I should read next time. It's all fixed. Wow this is definatley the best I've ever used, thanks! – Earl Larson Mar 15 '11 at 15:14
1

Check these out:

Jared Updike
  • 7,165
  • 8
  • 46
  • 72
ngduc
  • 1,415
  • 12
  • 17
0

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

Mike Soule
  • 732
  • 1
  • 6
  • 11