Adding Twitter Bootstrap Load to Rails
I just started ruby on rails a few weeks ago, I am currently creating a blog using rails-composers (which uses the twitter-bootstrap-rails gem). I want to add bootstrap carousel to my application view (i.e. to my application.html.erb)
I already tried to add the classic html code from twitter bootstrap documentation, but I just get the right and left controller buttons without displaying images.
Anyone have a solution for me?
PS: I am currently using Sass for my bootstrap design.
EDIT 02-11-2013 => Here's my code hoping you can find my error
<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 in Chrome: http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
source to share
instead
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and no need to specify "assets / images" to display the images folder. 1.jpg
enough!
source to share
Does your app /assets/javascripts/application.js contain a download link?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a link:
<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>
source to share
Bootstrap carousel in Rails suddenly stopped working
check above link, also you added this + jquery download
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
source to share