user3408293
user3408293

Reputation: 1395

Bootstrap Carousel not displaying properly

I am trying to implement a bootstrap carousel but it is not displaying properly.

This is what my page looks like:

enter image description here

My page/home.html.erb is the following:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="closeup.jpg" alt="Onemoretest" class="img-responsive">
      <div class="carousel-caption">
        1st photo
      </div>
    </div>
    testing what this outputs
  </div>

  <div class="carousel-inner">
    <div class="item active">
      <img src="big1.jpg" alt="onemoretest2." class="img-responsive">
      <div class="carousel-caption">
        2nd photo
      </div>
    </div>
    testing what this outputs2
  </div>

  <div class="carousel-inner">
    <div class="item active">
      <img src="big2.jpg" alt="..." class="img-responsive">
      <div class="carousel-caption">
        3rd photo
      </div>
    </div>
    testing what this outputs3
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

What am I missing? I can't figure it out, really frustrating

EDIT: Adding my log

Started GET "/" for 127.0.0.1 at 2014-04-17 02:33:03 -0700
Processing by PagesController#home as HTML
  Rendered pages/home.html.erb within layouts/application (4.0ms)
Completed 200 OK in 114ms (Views: 82.1ms | ActiveRecord: 0.0ms)


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-04-17 02:33:0
4 -0700


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-04-17 02:33:04
-0700


Started GET "/closeup.jpg" for 127.0.0.1 at 2014-04-17 02:33:04 -0700

ActionController::RoutingError (No route matches [GET] "/closeup.jpg"):
  actionpack (4.0.3) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `c
all'
  actionpack (4.0.3) lib/action_dispatch/middleware/show_exceptions.rb:30:in `ca
ll'
  railties (4.0.3) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `block in tag
ged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:25:in `tagged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `tagged'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.0.3) lib/active_support/cache/strategy/local_cache.rb:83:in `
call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.0.3) lib/rails/engine.rb:511:in `call'
  railties (4.0.3) lib/rails/application.rb:97:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `servi
ce'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/server.rb:295:in `block in
start_thread'


  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/_trace.erb (1.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_route.html.erb (2.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_table.html.erb (12.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescu
es/layout (64.0ms)


Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2014-04-17 02:33:04
-0700


Started GET "/assets/pages.js?body=1" for 127.0.0.1 at 2014-04-17 02:33:04 -0700



Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-04-17 02:33:04
 -0700


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-04-17 02:33:04 -070
0


Started GET "/assets/bootstrap" for 127.0.0.1 at 2014-04-17 02:33:04 -0700


Started GET "/big1.jpg" for 127.0.0.1 at 2014-04-17 02:33:04 -0700

ActionController::RoutingError (No route matches [GET] "/big1.jpg"):
  actionpack (4.0.3) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `c
all'
  actionpack (4.0.3) lib/action_dispatch/middleware/show_exceptions.rb:30:in `ca
ll'
  railties (4.0.3) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `block in tag
ged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:25:in `tagged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `tagged'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.0.3) lib/active_support/cache/strategy/local_cache.rb:83:in `
call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.0.3) lib/rails/engine.rb:511:in `call'
  railties (4.0.3) lib/rails/application.rb:97:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `servi
ce'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/server.rb:295:in `block in
start_thread'


  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/_trace.erb (1.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_route.html.erb (2.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_table.html.erb (1.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescu
es/layout (109.1ms)


Started GET "/big2.jpg" for 127.0.0.1 at 2014-04-17 02:33:04 -0700

ActionController::RoutingError (No route matches [GET] "/big2.jpg"):
  actionpack (4.0.3) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `c
all'
  actionpack (4.0.3) lib/action_dispatch/middleware/show_exceptions.rb:30:in `ca
ll'
  railties (4.0.3) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `block in tag
ged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:25:in `tagged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `tagged'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.0.3) lib/active_support/cache/strategy/local_cache.rb:83:in `
call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.0.3) lib/rails/engine.rb:511:in `call'
  railties (4.0.3) lib/rails/application.rb:97:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `servi
ce'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/server.rb:295:in `block in
start_thread'


  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/_trace.erb (1.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_route.html.erb (2.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_table.html.erb (2.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescu
es/layout (53.0ms)


Started GET "/closeup.jpg" for 127.0.0.1 at 2014-04-17 02:33:04 -0700

ActionController::RoutingError (No route matches [GET] "/closeup.jpg"):
  actionpack (4.0.3) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `c
all'
  actionpack (4.0.3) lib/action_dispatch/middleware/show_exceptions.rb:30:in `ca
ll'
  railties (4.0.3) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `block in tag
ged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:25:in `tagged'
  activesupport (4.0.3) lib/active_support/tagged_logging.rb:67:in `tagged'
  railties (4.0.3) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.0.3) lib/active_support/cache/strategy/local_cache.rb:83:in `
call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.0.3) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.0.3) lib/rails/engine.rb:511:in `call'
  railties (4.0.3) lib/rails/application.rb:97:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `servi
ce'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
  c:/RailsInstaller/Ruby2.0.0/lib/ruby/2.0.0/webrick/server.rb:295:in `block in
start_thread'


  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/_trace.erb (2.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_route.html.erb (1.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/routes/_table.html.erb (1.0ms)
  Rendered c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.3
/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescu
es/layout (49.0ms)

Upvotes: 0

Views: 1155

Answers (2)

user3408293
user3408293

Reputation: 1395

The problem was that I included <div class="carousel-inner"> for each image block. When it should encapsulate all three at once. Rookie mistake.

Upvotes: 1

Mike
Mike

Reputation: 346

ABPrime is right here. You can also use lines like the following in views to show images in Rails views.

<img src=<%= asset_path('closeup.jpg') %>/>

Given that your images are in the app/assets/images/ folder.

Upvotes: 0

Related Questions