javascript - Bootstrap Carousel(如何加载 javascript？)

Question

我正在尝试实现 Bootstrap 轮播。它不会因为某种原因滑动...无论何时我点击箭头滑动我的 http://localhost:3000/ 都会转到 http://localhost:3000/#carousel -example-generic

我认为我缺少必要的 javascript 要求，但不确定如何包含它们。

它们放在什么文件中？ application.js 或 application.css.scss 或在我的一个 views 中？

另外需要包含什么代码，它是否必须放在页面的特定位置？是 bootstrap.js 还是 bootstrap-transition.js 还是其他？我真的迷路了。

这是我的轮播，我相信它是正确的:

<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">
      <%= link_to image_tag("closeup.jpg", alt: "image", class:'img-responsive') %>
      <div class="carousel-caption">
        ...
      </div>
    </div>

    <div class="item">
      <%= link_to image_tag("parksolar.jpg", alt: "image", class:'img-responsive') %>
      <div class="carousel-caption">
        ...
      </div>
    </div>

    <div class="item">
      <%= link_to image_tag("big1.jpg", alt: "image", class:'img-responsive') %>
      <div class="carousel-caption">
        ...
      </div>
    </div>

  </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>

这是我的 appllication.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
// bootstrap.js
// Loads all Bootstrap javascripts
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

这是我的 application.css.scss(请注意，我还有一个导航栏，sass 标记会影响我的旋转木马 slider 吗？)

@import "bootstrap";

.navbar {
    border-radius: 0px;
    border-width: 0px;
    font-size: 16px;
    font-weight: bold;
    color: #f0ad4e;
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 35px;
    margin: 0px;
    background:transparent;
}

.navbar-default .navbar-nav > li > a {
    color: white;
}

.navbar-default .navbar-brand {
    color: white;
}






/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 * 
 *= require_self
 *= require_tree .
 */

使用 inspect element 我发现了这些错误:

它们是什么意思？

Answer 1

我想和大家分享一下，我已经解决了很多“Javascript 不工作”的问题，仅仅是因为有了

//= require jquery
//= require jquery_ujs

以上

//= require bootstrap

在 Application.js 文件中。

试试这个，如果有帮助请告诉我。 你能在这里分享你的 GEM 文件内容吗？