我目前正在学习使用Web开发的绳索并开始使用Bootstrap,我目前正在研究旋转木马。我不喜欢这个设计,我找到了an alternative carousel
我尝试了很多方法,但我已经阅读了网站上的指南,但由于某些原因我无法在我的网站上运行。有谁知道我会如何添加插件?
答案 0 :(得分:2)
这是让你入门的东西:
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;
}