0

我正在尝试修复 Rails 4 app 中的错误。我的应用程序上的 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 使用 composer 编写的 RailsApps 入门应用程序。

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

所以我试图手动完成。

4

3 回答 3

2

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

第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步：

包括在 application.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

于 2016-10-18T04:56:19.113 回答
0

它应该是

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

于 2015-04-05T14:22:09.123 回答
0

Okie，这是我第一次集成在 rails 环境之外开发的基于引导的主题，而不是集成到其中。这是我解决问题的方法在 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 我的滑块甚至引导模态都不起作用。因此，经过多次尝试，我发现它必须位于顶部。

我是如何发现的，几乎每次我昨天检查我的源代码时，我都忽略了 application-[content hash].js ，它位于我在清单文件中提到的所有 js 文件下方。

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

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

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

于 2015-04-06T03:57:06.493 回答