Ruby on RailsアプリでサードパーティJavaScriptが動作しない

Question

私はRuby on RailsアプリケーションでBootstrap 4を使用しています。私の問題は、私のサードパーティのJavaScriptファイルが私のアプリで動かないことに直面しています。サードパーティのJSファイルには、動作していないカルーセルエフェクトが含まれています。マイapplication.js

//= require jquery3 
//= require popper 
//= require bootstrap-sprockets 
//= require slick 
//= require rails-ujs 
//= require turbolinks 
//= require_tree . 

Deploy on Heroku、Github Repositoryが含まれています。

なぜこれが機能しないのですか？

Answer 1

はjqueryのレールの宝石のドキュメントによると、また、あなたのapplication.jsファイルに

//= require jquery_ujs 

を追加する必要があります。それを試して、それが動作するかどうか確認してください。

Answer 2

あなたのjavascriptのコードは、私が私が見るあなたのHerokuのアプリ上でコンソールを検査するときのようにロードされているようにそれは見ていません：あなたのWOWコードがあなたのplugins.js（またあなたのOwl Carouselに存在するように

Uncaught ReferenceError: WOW is not defined 

が見えますソースコードの寿命）。

application.jsファイルにplugins.jsを追加して、active.jsファイルの前にロードされていることを確認してください。

//= require plugins 
//= require_tree . 

（私はおそらくrequire_treeを削除し、順序でロードする必要があるものに個別に依存して、ファイルの各が含まれます）。

次に、Owl jsコードをUsageセクション内のスニペットと同じように変更してください。それが正しくロードされることを保証するためには、このようなものでなければなりません。

$(document).ready(function() { 
    $(".app_screenshots_slides").owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    smartSpeed: 800, 
    margin: 30, 
    center: true, 
    dots: true, 
    responsive: { 
     0: { 
     items: 1 
     }, 
     480: { 
     items: 3 
     }, 
     992: { 
     items: 5 
     } 
    } 
    }); 
}); 

FWIWコンソールで余分なエラー（カスタムフォントがロードされず、その他のjQueryエラー）も発生します。また、あなたのactive.jsファイル内の未使用のJSのように見えます。この回答には、あなたが尋ねたものだけが含まれています。

すべてのソースjsコードをplugins.jsにする代わりに、Rails Assetsを使用すると、依存関係の管理に役立ちます。興味があればOwlCarousel2へのリンクがあります。