将 flexslider 手动添加到 Rails 4 app - Type Error flexslider is not a function

Question

我正在尝试修复 Rails 4 应用程序中的一个错误。我的应用程序上的 flexslider 不工作，根本没有图像加载。在控制台中它显示 - TypeError (..).flexslider 不是函数当主题未集成到 Rails 中时，该主题完全可以正常工作。它是一个基于引导的主题，具有以下配置 - application.css.scss 文件如下所示

*= require_self
*= require font-config
*= require framework_and_overrides
*= require animate
*= require flexslider
*= require site-wide

对于 application.js 文件具有以下内容 -

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require flexslider
//= require cbpAnimatedHeader
//= require jqueryeasing
//= require jquerymousewheel
//= require classie
//= require scrollpage
//= require site

尝试多次更改他们的顺序，但没有效果。滑块按以下方式初始化 -

$(document).ready(function() {
$('#myCarousel').flexslider({
        animation: "fade",
        directionNav: false,
        controlNav: false //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage

    });
    $('#slider').flexslider({
        animation: "fade",
        directionNav: true
    });
   });

我是一个 Rails 初学者，请提出一些见解，过去几个小时一直在努力解决它。

感谢您的宝贵时间。

更新：我正在使用 Daniel Kehoe 的 RailsApps starter apps using composer 。

更新：我没有使用任何 gem 安装 flexslider，因为我在 rubygems 网站上找到的 gem 使用的是旧版本，即。 flexslider 2.2 我用的是 2.4 .

所以我尝试手动完成。

Answer 1

应该是

*= require jquery.flexslider

而不是

*= require flexslider

有两个 gem flex slider & flexslider-rails：它们包含 javascript 的方式相同。请参阅您正在使用的文档。

https://github.com/constantm/Flexslider-2-Rails-Gem#usage https://github.com/werein/flexslider-rails#usage

Answer 2

Okie，这是我第一次集成在 rails 环境之外开发并集成到其中的基于 bootstrap 的主题。这是我解决问题的方法在 application.js 文件（清单文件）中，我添加了

//= require_self 在上面，如下所示：

//= require_self
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require flexslider
//= require cbpAnimatedHeader
//= require jqueryeasing
//= require jquerymousewheel
//= require classie
//= require scrollpage
//= require site

将其放置在 //= require jquery 和 //= require turbolinks 之间的任何位置使我的滑块甚至 bootstrap 模式无法正常工作。所以经过多次尝试我发现，它必须在最前面。

我是怎么发现的，几乎每次我昨天检查我的源时，我都忽略了应用程序-[content hash].js，它被放置在我在清单文件中提到的所有 js 文件下面。

今天，我认为可能是这个文件造成了问题，并且由于文件名为 application-[content hash].js 我使用 //= require_self 来适应其在文件本身中硬编码的位置. 我不知道 js 的 //= require_self 东西，因为我看到它只在 css 清单文件中被提及，可能是因为我使用 Rails 4.2 的旅程只是 5- 6个月大。所以高级 rails 开发人员可能有更好的方法来做到这一点。

如果有人可以改进答案或提供更多信息，我将不胜感激。

谢谢 ** 更新 - Okie 这是我发现的另一件事，我正在使用 Daniel Kehoe 的入门应用程序，它使用 Composer 工具，它包含 public 文件夹中的预编译资产，在使用 require_self 指令时包含在内。

Answer 3

好的，我也花了一段时间才弄明白，但现在效果非常好。

第 1 步：

从这里下载源代码：http://flexslider.woothemes.com/thumbnail-controlnav.html

第 2 步：

然后，得到如下三个文件：

1. /demo/css/flexslider.css
2. /fonts      //yes, copy this entire folder that contains four files
3. /demo/js/jquery.flexslider.js

第 3 步：

重新定位 vender/assets/stylesheets 中的前两个文件（1 和 2），和 vender/assets/javascripts

中的最后一个 (3)

第 4 步：

包含在应用程序中。css/sass 在顶部：

*= require flexslider

并包含在 application.js 中：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.flexslider
//= require_tree .

设置 5：

将下面的内容放入 application.js

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
   });
});

然后你得到基本的滑块。如果您想获得其他滑块类型，只需将 STEP 5 javascript 代码更改为您在此处看到的任何内容：http://flexslider.woothemes.com/index.html

将 flexslider 手动添加到 Rails 4 app - Type Error flexslider is not a function

Adding flexslider manually into Rails 4 app - Type Error flexslider is not a function

jquery

ruby-on-rails

twitter-bootstrap

railsapps