开发者

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

Instead of:

&l开发者_运维知识库t;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.


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


Check these out:

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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜