2015-10-06 72 views
2

我试图引导旋转木马在我on Rails应用程序的红宝石整合,所以我做了这样的观点:引导转盘无法正常工作轨道

<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的/ application.js中的文件:

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

你确定已经加载了所需的bootstrap JavaScript文件吗? –

+0

@SaiqulHaq不知道你在说什么,但我确实添加了导入“bootstrap-sprockets”并将“bootstrap”(用@)导入到我的aplication.css.sass中,我错过了什么? – Vroenguard

+0

编辑您的应用程序/ assets/javascripts/application.js文件 然后添加 // = require jquery // = require bootstrap-sprockets; 请先参阅文档,https://github.com/twbs/bootstrap-sass –

回答

0

您需要执行JavaScript和jQuery代码中的这个旋转木马的工作。

在HTML文件的末尾,添加这个(也可以是div和身体之间)

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

它应该做的伎俩。 您也可以将此代码放在部分上并将其加载到您的应用程序布局上。