Twitter Bootstrap 2轮播 – 一次显示一组缩略图,如jcarousel

我很感激,如果有人可以建议如何修改Twitter Bootstrap 2轮播,以便一次显示一组缩略图,类似于这个jquery插件(jcarousel)

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

谢谢

目前在Bootstrap Carousel上没有对这样的选项的支持,我不建议你破解脚本,因为这基本上创建了一个新的,当更新时你可能会失去支持但是还有其他方法你可以使用bootstrap携带的.thumbnails组伪造这样的设置。 您将仅限于为滑块容器提供宽度或span类,如下所示:

HTML

  

演示 , 在这里编辑。

正如您所看到的,我在旋转木马滑动的item div中嵌套了一个缩略图组,这样您就可以滑动一组图像,而无需修改原始脚本。

* :更新了旋转木马内部多个图像尺寸的演示。

@ andres-ilich首先关闭这个是一个很好的答案,你让我思考jCarousel喜欢的function以及Twitter Bootstrap(TB)旋转木马将如何被黑客攻击(这是不理想的)。 我完全同意你的意见,而不是搞乱核心框架覆盖,但决定是否有一种安全的方法可以“扩展”Carousel以处理像jCarousel这样的每项目滚动。

这是我的理由:

  • 我假设所有物品都位于旋转木马的第一个.item中。 由于TB有自己的逻辑和核心function关于从一个项目移动到另一个项目,我需要更精细的逻辑控制,但不想摔跤或覆盖旋转木马的内部。 因此,我将旋转木马仅保留在一个项目上以防止必须捕获或覆盖TB旋转木马的任何事件/代码,因为它们永远不会发射(运动明智)。
  • 轻轻地使用.prototype并且仅将自定义事件添加到我之后用于绑定我的自定义逻辑的next / prev。 原型克隆TB方法首先将一个$ .trigger添加到TB carousel next / prev,然后执行原始TB轮播逻辑。 这可以保护我的逻辑,以抵御未来的结核病发布(希望如此)
  • 创建了一个名为.jcarousel的类,以允许这种类型的轮播的唯一目标,这样我们就不会干扰页面上将利用正常TB轮播function的其他轮播。

我在我的代码中评论得最好,因为我正在享受星巴克的拿铁咖啡,而我正在这样做,我确信还有改进的余地,因为这是一个字面上的清晨,等待总线类型的答案。

希望这可以帮助任何需要它的人。 喜欢Twitter Bootstrap! 2.1是一个很棒的新版本。

这是jsFiddle Demo jCarousel – Per Item扩展

请参阅这篇关于自定义Bootstrap Carousel的优秀博文:

http://untame.net/2013/04/twitter-bootstrap-carousel/#part2

试试这个

问题: Twitter Bootstrap垂直缩略图轮播

GIT Ripo。 : https : //github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel