Jquery 引导转盘不工作轨道_Jquery_Css_Ruby On Rails_Ruby_Twitter Bootstrap

Jquery 引导转盘不工作轨道

jquery css ruby-on-rails ruby twitter-bootstrap

Jquery 引导转盘不工作轨道,jquery,css,ruby-on-rails,ruby,twitter-bootstrap,Jquery,Css,Ruby On Rails,Ruby,Twitter Bootstrap,我试图在ruby on rails应用程序中集成bootstrap的旋转木马，因此我提出了以下观点： <head> </head> <body> <div id="carousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li

我试图在ruby on rails应用程序中集成bootstrap的旋转木马，因此我提出了以下观点：

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

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="<%= image_url('lol.jpg')%>" alt="Leagues Of Legends">
      </div>
      <div class="item">
        <img src="<%= image_url('SC2.jpg')%>" alt="Starcraft II">
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span >
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  </body>

您需要在代码中执行javascript和jquery，才能使这个旋转木马工作

在html文件的末尾，添加以下内容（可以在div和body之间）


$（文档）.ready（函数（）{
$（#mycarousel'）.carousel（）；
});

它应该会起作用。

您也可以将此代码放在一个部分上，并将其加载到您的应用程序布局中。

您确定已经加载了所需的引导javascript文件吗？@SaiqulHaq不确定您指的是什么，但我确实在我的application.css.sass中添加了导入“引导链轮”和导入“引导”（带@），我遗漏了什么吗？编辑你的app/assets/javascripts/application.js文件，然后添加//=require jquery/=require bootstrap链轮；请先参考文档，是的，我已经这么做了（很抱歉），我会编辑我的帖子来添加我的application.js文件。看起来你的html代码没有包含css和javascript文件，head标记是空的，body标记中没有rails包含javascript代码

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-sprockets
//= require_tree .

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
  $( document ).ready(function(){
  $('#mycarousel').carousel();
  });
</script>