Fatal编程技术网

Javascript Rails引导传送带

javascript jquery html ruby-on-rails twitter-bootstrap

Javascript Rails引导传送带,javascript,jquery,html,ruby-on-rails,twitter-bootstrap,Javascript,Jquery,Html,Ruby On Rails,Twitter Bootstrap,大家好，我有这个代码，我一直在为我的网站工作。我正在尝试实现一个旋转木马功能，其中一张图片在另一张图片上滑动。我遇到的问题是图片不会滑动。下面是我的代码在我的欢迎控制器的索引页中的样子： <html> <head> </head> <body> <div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="ca

大家好，我有这个代码，我一直在为我的网站工作。我正在尝试实现一个旋转木马功能，其中一张图片在另一张图片上滑动。我遇到的问题是图片不会滑动。下面是我的代码在我的欢迎控制器的索引页中的样子：

<html>
    <head>
    </head>
        <body>


<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >               
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                </ol>

                <div class="carousel-inner">
                    <div class = "item-active">
                    <%= image_tag("slide2.jpg", class: "img-responsive") %> 
                    </div>
                    <div class = "item">
                    <%= image_tag("slide1.jpg", class: "img-responsive") %> 
                    </div>
                </div>

                <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                    <span class = "icon-prev"></span>
                </a>

                <a class="carousel-control right" href="#myCarousel" data-slide="next">
                    <span class = "icon-next"></span>
                </a>
            </div>

            <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src = "js/bootstrap.js"></script>


        </body>
</html>
这方面的任何帮助都会很好

您可以将下面的代码添加到application.js文件中

或者，您可以简单地将选项传递给数据属性：

<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >
参考：

我希望有帮助

更新

我想你对js路径有一些问题。您确定引导文件的js路径吗

如果您将此代码放入标记中，它肯定会工作：

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
它可能不起作用，因为它是在jQuery加载之前被调用的。我会将代码放在一个helper js文件中，并将该文件包含在application.js中

这应该确保在脚本加载之前加载jQuery

application.js
//=require helper_file

当我为application.js添加代码时，这对我不起作用。我还尝试了另一种解决方案，但现在当我单击箭头时，它在一个页面上显示了两个图像：现在你需要使用css:-那么我会在welcome.js.coffee脚本文件中执行此代码，并在我的application.js文件中调用该文件，还是创建一个实际的帮助文件？你可以将其添加到welcome文件中。如果你还没有一个js文件，我建议你使用helper.js。我现在已经编辑了我的帖子来显示我所做的更改。我已经在欢迎文件中添加了适当的javascript，但仍然没有成功。每次我尝试点击左箭头和右箭头转到下一页时，都没有发生任何事情，它通过显示myCarouselCan来显示url中的按钮被点击，您可以发布application.js文件的内容。我想知道是否包括引导js。你应该把这两个都放在那里require jquery/=require bootstrap 
<div id = "myCarousel" class = "carousel slide" data-interval="1000" data-ride="carousel" >

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">