OwlカルーセルテンプレートがRailsで動作しない

Question

Railsの初心者ですが、私は友人との間でプロジェクトを構築しようとしている電子商取引サイトのテンプレートを変換しようとしていますサイトのデモはこちら（demo2.transvelo.in/html/rimbus/index.php?page=fashion-v4 &h = 6 & f = 2）でご覧いただけます。しかし、私はそれを正しく変換するいくつかの問題にぶつかりました、主にOwl Carouselアプリケーションは正しく動作していないようです。

デモでわかるように、これがフローカルーセルの実行方法です。実際にテンプレート用に受け取ったファイル（非純正のhtml/css/js？）では、テンプレートファイルは実際にはうまく動作します。デモページに表示されているようです。

しかし、すべてのhtml、css、jsをインポートした後で、自分の周りの写真の一部を変更すると、thisのようになります。

ここでの最初の問題は、カルーセルコントロールがかなり混乱していることです。画像から、現在のページには、そこにあるはずの3つではなく、循環する2つのオプションしかないことがわかります。しかし、さらに奇妙なことに、一度ページを移動すると、カルーセルの上部に別のカルーセルコントロールメニューが表示されます（下のリンク）。残念ながら、カルーセルがページ全体を占めているため、他の2つのカルーセル制御オプションも同時に存在し、このようなダブルカルーセルのことがあります。

これをさらに見てみると、最初の2つの（？）フクロウカルーセルオブジェクトには、hereが表示されているように、フクロウカルーセルオブジェクトが作成されているようです。 3つのオプションカルーセル制御オブジェクトもここで見ることができます。

私は何が間違っているのか把握しようとしてきましたが、そうすることはできませんでした。私はowl-carouselの宝石を実装しようとしたことがあり、コードを巧みに使いこなしています。また、警告として、テンプレートにはowl-carousel jsファイルが付属しています。これは、owl関数に多くの特殊性と追加機能を追加します。したがって、owlカルーセルは必ずしも通常と同じ方法で呼び出されるとは限りません見ることができる。 HTMLコードでは、owlカルーセルはクラスとIDによって呼び出されますが、変数を個別に操作して削除するため、それぞれがカルーセルオブジェクトに必要なように見えるので、コードを少し変更してみました。

しかし、ええ、前にこのようなことを経験したことがありますか、または洞察力がありますか？または、これは私の初めてのJavaScriptのテンプレート全体を変換しようとしていますが、レールでjsの問題に遭遇したのではなく、依存関係/アセットパイプラインに問題がありますか？

非常に長い投稿を申し訳ありません。 htmlファイルのフクロウカルーセル部分に関連するコードはこれです：

<div class="body-content"> 
    <div class="food outer-bottom-vs"> 
    <div class="food-slider hero-style-2" id="hero"> 
     <div class="big-slider owl-main owl-carousel owl-inner-nav owl-ui-lg" id="owl-main"> 
     <div class="item" id="banner1"> 
      <div class="container"> 
      <div class="slider caption vertical-center text-right"> 
       <h2 class="fadeInDown-1">Aniart</h2> 
       <h1 class="fadeInDown-2">Anime art <span>straight from the artist</span></h1> 
       <div class="slide-btn fadeInDown-3"> <a href="#" class="btn btn-primary">Shop Now</a> </div> 
      </div> 
      </div> 
     </div> 
     <div class="item" style="background-image: url(app/assets/images/sliders/7.jpg);"> 
      <div class="container"> 
      <div class="slider caption vertical-center text-right"> 
       <h2 class="fadeInDown-1">get gift card</h2> 
       <h1 class="fadeInDown-2">drink <span>&amp;food</span></h1> 
       <div class="slide-btn fadeInDown-3"> <a href="#" class="btn btn-primary">Shop Now</a> </div> 
      </div> 
      </div> 
     </div> 
     <div class="item" style="background-image: url(assets/images/sliders/7.jpg);"> 
      <div class="container"> 
      <div class="slider caption vertical-center text-right"> 
       <h2 class="fadeInDown-1">get gift card</h2> 
       <h1 class="fadeInDown-2">drink <span>&amp;food</span></h1> 
       <div class="slide-btn fadeInDown-3"> <a href="#" class="btn btn-primary">Shop Now</a> </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

application.scss：

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 

//= require bootstrap-sprockets 
//= require foundation 

//= require turbolinks 
// require lightbox 
//= require_tree . 

$(function(){ $(document).foundation(); }); 

scripts.jsテンプレートの一部をapplication.js

*= require_tree . 
*= require_self 
*= require foundation_and_overrides 
*= require font-awesome 
*= require lightbox 
*= require owl.carousel 
*/ 
@import "bootstrap-sprockets"; 
@import "owl.carousel"; 
@import "owl.carousel/owl.theme.default"; 

ファイル

(function($) { 
    "use strict"; 

    /*===================================================================================*/ 
    /* owl carousel 
    /*===================================================================================*/ 
    $(document).ready(function() { 

     var dragging = true; 
     var owlElementID = "#owl-main"; 

     function fadeInReset() { 
      if (!dragging) { 
       $(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3," + owlElementID + " .caption .fadeIn-4").stop().delay(800).animate({ opacity: 0 }, { duration: 400, easing: "easeInCubic" }); 
      } 
      else { 
       $(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3," + owlElementID + " .caption .fadeIn-4").css({ opacity: 0 }); 
      } 
     } 

     function fadeInDownReset() { 
      if (!dragging) { 
       $(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3," + owlElementID + " .caption .fadeInDown-4").stop().delay(800).animate({ opacity: 0, top: "-15px" }, { duration: 400, easing: "easeInCubic" }); 
      } 
      else { 
       $(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3," + owlElementID + " .caption .fadeInDown-4").css({ opacity: 0, top: "-15px" }); 
      } 
     } 

     function fadeInUpReset() { 
      if (!dragging) { 
       $(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3," + owlElementID + " .caption .fadeInUp-4").stop().delay(800).animate({ opacity: 0, top: "15px" }, { duration: 400, easing: "easeInCubic" }); 
      } 
      else { 
       $(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3," + owlElementID + " .caption .fadeInUp-4").css({ opacity: 0, top: "15px" }); 
      } 
     } 

     function fadeInLeftReset() { 
      if (!dragging) { 
       $(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3, " + owlElementID + " .caption .fadeInLeft-4").stop().delay(800).animate({ opacity: 0, left: "15px" }, { duration: 400, easing: "easeInCubic" }); 
      } 
      else { 
       $(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3," + owlElementID + " .caption .fadeInLeft-4").css({ opacity: 0, left: "15px" }); 
      } 
     } 

     function fadeInRightReset() { 
      if (!dragging) { 
       $(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3," + owlElementID + " .caption .fadeInRight-4").stop().delay(800).animate({ opacity: 0, left: "-15px" }, { duration: 400, easing: "easeInCubic" }); 
      } 
      else { 
       $(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3," + owlElementID + " .caption .fadeInRight-4").css({ opacity: 0, left: "-15px" }); 
      } 
     } 

     function fadeIn() { 
      $(owlElementID + " .active .caption .fadeIn-1").stop().delay(500).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeIn-2").stop().delay(700).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeIn-3").stop().delay(1000).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeIn-4").stop().delay(1000).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); 
     } 

     function fadeInDown() { 
      $(owlElementID + " .active .caption .fadeInDown-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInDown-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInDown-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInDown-4").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
     } 

     function fadeInUp() { 
      $(owlElementID + " .active .caption .fadeInUp-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInUp-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInUp-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInUp-4").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); 
     } 

     function fadeInLeft() { 
      $(owlElementID + " .active .caption .fadeInLeft-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInLeft-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInLeft-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInLeft-4").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
     } 

     function fadeInRight() { 
      $(owlElementID + " .active .caption .fadeInRight-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInRight-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInRight-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
      $(owlElementID + " .active .caption .fadeInRight-4").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); 
     } 

     $(owlElementID).owlCarousel({ 
      animateOut: 'fadeOut', 
      autoplay: false, 
      autoplayTimeout: 2000, 
      autoplayHoverPause: true, 
      stopOnHover: true, 
      loop: true, 
      navRewind: true, 
      items: 1, 
      dots: true, 
      nav:false, 
      //navText: ["<i class='icon fa fa-angle-left'></i>", "<i class='icon fa fa-angle-right'></i>"], 
      lazyLoad: true, 
      stagePadding: 0, 
      responsive : { 
       0 : { 
        items : 1, 
       }, 
       480: { 
        items : 1, 
       }, 
       768 : { 
        items : 1, 
       }, 
       992 : { 
        items : 1, 
       }, 
       1199 : { 
        items : 1, 
       }, 
       onTranslate : function(){ 
         echo.render(); 
        } 
      }, 


      onInitialize : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onInitialized : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onResize : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onResized : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onRefresh : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onRefreshed : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onUpdate : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onUpdated : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onDrag : function() { 
       dragging = true; 
      }, 

      onTranslate : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 
      onTranslated : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onTo : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onChange : function() { 
       fadeIn(); 
       fadeInDown(); 
       fadeInUp(); 
       fadeInLeft(); 
       fadeInRight(); 
      }, 

      onChanged : function() { 
       fadeInReset(); 
       fadeInDownReset(); 
       fadeInUpReset(); 
       fadeInLeftReset(); 
       fadeInRightReset(); 
       dragging = false; 
      } 
     }); 

     $('.banner-slider').owlCarousel({ 
      loop:true, 
      margin:30, 
      autoplay: true, 
      nav:false, 
      dots: true, 
      navText: ["", ""], 
      items:1, 
      responsive:{ 
       0:{ 
        items:1 
       }, 
       600:{ 
        items:3 
       }, 
       1000:{ 
        items:1 
       } 
      } 
     }); 
     $('.clients-say').owlCarousel({ 
      loop:true, 
      margin:30, 
      autoplay: true, 
      nav:true, 
      navText: ["", ""], 
      items:1, 
      responsive:{ 
       0:{ 
        items:1 
       }, 
       600:{ 
        items:1 
       }, 
       1000:{ 
        items:1 
       } 
      } 
     }); 

また、私のjqueryが正しく実装されている可能性があることを示す "tooltip is not function"というエラーがコンソールに表示されます。ただし、scripts.jsファイル内でフローカルーセル関数が呼び出された後、ツールヒントが呼び出されます。これは依然として懸念の原因になりますか？

Answer 1

気にしないで、私はそれを得ました。それは私のapplication.htmlファイル内で呼び出す別のJavascript関連関数と関係していました。ありがとう！ ：D