Rails Bootstrap传送带

Question

大家好，我有为我的网站工作的这段代码。 我正在尝试实现轮播功能，其中一张图片在另一张图片上滑动。 我遇到的问题是图片不会滑动。 这是我的欢迎控制器的索引页中的代码：

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

welcome.js文件：

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 10000
  });
});

任何帮助都会很棒！

Answer 1

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

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 10000
  });
});

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

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

参考： https : //v4-alpha.getbootstrap.com/components/carousel/#via-javascript

希望对您有所帮助！

更新

我认为您在js路径方面存在一些问题。 您确定引导文件的js路径吗？

如果将此代码放在<head>标记中，它将肯定可以正常工作：

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

Answer 2

它可能不起作用，因为它在jQuery加载之前被调用。 我会将代码放在一个辅助js文件中，并将该文件包含在application.js中

那应该确保在脚本执行之前先加载jQuery。

application.js // =需要helper_file

Rails Bootstrap传送带

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-14 02:48:19

解决方案2
0 2017-01-14 03:21:13

Rails Bootstrap传送带

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-14 02:48:19

解决方案2 0 2017-01-14 03:21:13

解决方案1
1 已采纳 2017-01-14 02:48:19

解决方案2
0 2017-01-14 03:21:13