0

Rails 4 app のエラーを修正しようとしています。アプリのフレックススライダーが機能せず、画像がまったく読み込まれません。コンソールに表示される - 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 スターター アプリを composer を使用して使用しています。

更新: ruby​​gems Web サイトで見つけた gem が古いバージョンを使用しているため、gem を使用して flexslider をインストールしていません。flexslider 2.2 と私は 2.4 を使用しています。

だから私は手動でやろうとしています。

4

3 に答える 3

2

さて、それを理解するのにもしばらく時間がかかりましたが、今では驚くほど機能しています.

ステップ1：

ここからソースコードをダウンロードしてください: http://flexslider.woothemes.com/thumbnail-controlnav.html

ステップ2：

次に、以下の 3 つのファイルを取得します。

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

ステップ 3:

最初の 2 つのファイル (1 と 2) を vender/assets/stylesheets 内に再配置し、最後の 1 つ (3) を vender/assets/javascripts 内に再配置します。

ステップ 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

Okie、レール環境の外で開発されたブートストラップベースのテーマを初めて統合し、それに統合しました。これが私が問題を解決した方法です。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 、スライダーとブートストラップモーダルでさえ機能しなくなりました。だから私が考え出した多くの試みの後、それは一番上になければなりません。

昨日ソースをチェックするたびに、マニフェスト ファイルで言及したすべての js ファイルの下に配置された application-[content hash].js を無視していたことがわかったのです。

今日、このファイルが問題を引き起こしているのではないかと考えました。ファイル名が application-[content hash].js だったので//= require_self、ファイル自体にハードコードされた配置に対応していました。私は//= require_selfそれがcssマニフェストファイルでのみ言及されているのを見るので、私はjsのことを知りませんでした.Rails 4.2での私の旅はわずか5-6ヶ月前です. そのため、Rails の上級開発者には、より良い方法があるかもしれません。

誰かが答えを改善したり、それにもう少し光を当てたりできるなら、私は感謝します.

ありがとう ** 更新 - Okie ここで私が見つけたもう 1 つのことです。私は Composer ツールを使用して Daniel Kehoe によるスターター アプリを使用していました。このアプリには public フォルダーにプリコンパイルされたアセットが含まれており、require_self ディレクティブを使用したときに含まれていました。

于 2015-04-06T03:57:06.493 に答える
0

そのはず

*= require jquery.flexslider

それ以外の

*= require flexslider

2 つの 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 に答える