Rails 引导轮播答案

【问题标题】：Rails Bootstrap CarouselRails 引导轮播
【发布时间】：2017-01-14 01:57:52
【问题描述】：

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

<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
  });
});

在这方面的任何帮助都会很棒！

【问题讨论】：

标签： javascript jquery html ruby-on-rails twitter-bootstrap

【解决方案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">

【讨论】：

当我为 application.js 添加代码时，这对我不起作用。我也尝试了其他解决方案，但也没有用
所以现在当我单击箭头时，它会在一页上显示两个图像:(
现在你需要玩css :-)

【解决方案2】：

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

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

应用程序.js //= 需要 helper_file

【讨论】：

那么我会在一个welcome.js.coffee 脚本文件中执行此代码并在我的application.js 文件中调用该文件，还是创建一个实际的帮助文件
您可以将其添加到欢迎文件中。如果你还没有包含的 js 文件，我只是建议了一个 helper.js。
我现在编辑了我的帖子以显示我所做的更改。我已将适当的 javascript 添加到欢迎文件中，但仍然没有运气。每次我尝试单击左右箭头转到下一页时都没有任何反应，它通过显示#myCarousel 表明在 url 中单击了该按钮
你能发布你的 application.js 文件的内容吗？我想知道是否包含 bootstrap js。你应该把这两个都放在里面。 //= 需要 jquery //= 需要引导程序