[英]Adding Twitter Bootstrap Carousel to rails app
I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). 几周前我刚刚在rails上开始使用ruby,我目前正在使用rails composer(使用twitter-bootstrap-rails gem)构建一个博客。 I want to add the bootstrap carousel to my application view ( ie to my application.html.erb)
我想将bootstrap轮播添加到我的应用程序视图(即我的application.html.erb)
I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed. 我已经尝试从twitter bootstrap文档添加经典的html代码,但我只是得到左右控制器按钮,没有显示图片。
Does somebody have the solution for me ? 有人为我提供解决方案吗?
PS : I currently use Sass for my bootstrap design. PS:我目前使用Sass进行自举设计。
EDIT 02-11-2013 => Here's my code hope you can find what my mistake is 编辑02-11-2013 =>这是我的代码希望你能找到我的错误
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
EDIT 2 : And this is how it looks like on Chrome : http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png 编辑2:这就是它在Chrome上的样子: http : //s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
instead of 代替
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails: 对rails使用以下图像标记:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and there is no need to specify "assets/images" for showing the image folder. 并且无需指定“资产/图像”来显示图像文件夹。 the
1.jpg
is enough! 1.jpg
就够了!
Does your app/assets/javascripts/application.js contain a reference to bootstrap? 你的app / assets / javascripts / application.js是否包含对bootstrap的引用?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a reference: 我的旋转木马作为参考:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="/users/sign_up"><img src="/pictures/1.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/2.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/3.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/4.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/WordcloudInsight.png"> </a>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Bootstrap Carousel in Rails suddenly stopped working Rails中的Bootstrap Carousel突然停止工作
check above link, also did you add this + is jquery loading 检查上面的链接,你也加了这个+是jquery loading
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.