编辑bootstrap轮播

Question

我目前正在学习使用Web开发的绳索并开始使用Bootstrap，我目前正在研究旋转木马。我不喜欢这个设计，我找到了an alternative carousel

我尝试了很多方法，但我已经阅读了网站上的指南，但由于某些原因我无法在我的网站上运行。有谁知道我会如何添加插件？

Answer 1

这是让你入门的东西：
http://jsfiddle.net/panchroma/hV3bT/

我从http://www.pixedelic.com/plugins/camera/下载了zip包，然后查看了basic.htm页面。

如果你查看bootstrap示例的HTML，它几乎与下载的示例页面完全相同，除了不将内容放在

中

<div class="fluid_container"> ... </div>  

我把它放在等效的引导网格

中

<div class="container">
<div class="row-fluid">
<div class="span12">

<!-- content here -->

</div>
</div>
</div>

然后我按照与basic.html示例中相同的顺序加载CSS和javascript文件。

我认为唯一的另一件事是你会注意到示例页面中还有一些样式。可能你唯一需要的是#back_to_camera div。

如果您在此示例中需要有关CSS和javascript的更多信息，请转到jsFiddle并检查结果窗格的源代码。您将看到正在使用的CSS和javascript文件，它们的加载顺序以及头部中的其他CSS和javascript。

我的例子是缺少一些图标......箭头等。一旦你在你的网站上安装图像，javascript和CSS，我认为它们也应该都很好。

希望这有帮助！

编辑：我添加了这个额外的CSS来强制第二个轮播示例底部的缩略图水平显示

.camera_thumbs_cont ul{
width:100% !important;
}

.camera_thumbs_cont li
{
display: inline !important;
padding-right: 20px;
}