Bootstrap 3轮播定制ala hulu或itunes

时间:2013-09-12 23:26:36

标签: twitter-bootstrap carousel

IMO开箱即用的转盘是有限的,不适合企业使用。是否有人知道该组件的自定义工作类似于Hulu,netflix和itunes如何在其网站上实现轮播?

更具体地说,我需要旋转木马不会溢出到多行而是保持在一条线上并仅显示空间提供的项目数量。 BS3中的新网格系统非常适合这种无人驾驶旋转木马,但是只要您应用旋转木马功能,它就像旧的自举一样,并且在较小的断点处不能很好地工作。

请参阅netflix.com或hulu.com或查看itunes桌面应用程序以获取所需实施的示例。

2 个答案:

答案 0 :(得分:2)

您可以自定义轮播的“幻灯片”部分,以包含任何类型的内容,包括流体行和缩略图。

http://jsfiddle.net/fVqJ3/

<div class="carousel-inner">

<div class="item active">
<div class="row">
  <div class="col-xs-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" /></a></div>
  <div class="col-xs-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" /></a></div>
  <div class="col-xs-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" /></a></div>
  <div class="col-xs-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" /></a></div>
</div>
</div></div>

答案 1 :(得分:0)

你是说像bootstrap这样的例子吗? 它看起来与您发布的http://www.hulu.com/非常相似。