Owl Carousel模板在Rails中不起作用

Question

然而，我遇到了一些正确转换它的问题，主要是Owl Carousel应用程序似乎无法正常工作。

因此，正如您在演示中看到的，这就是owl carousel应该如何运行。在我实际收到的模板文件中--在非rails环境中(仅仅是纯html/css/js?)，模板文件实际上工作得很好。在演示页面上看起来是这样的。

但是，在导入了所有的html、css和js之后--并且我自己修改了一些图片之后，它看起来像this。

所以这里的第一个问题是，carousel控件相当混乱。从图中您可以看到，在当前页面上只有两个选项可供循环，而不是应该有的三个选项。然而，更奇怪的是，一旦你循环浏览页面，另一个旋转木马控件菜单就会出现在旋转木马的顶部(链接如下)。你看不到，因为不幸的是，旋转木马占据了整个页面，另外两个旋转木马控制选项同时也在那里，造成了这种双旋转木马的东西。

因此进一步研究一下，似乎在前两个(?)中创建了一个owl carousel对象你可以看到here的owl carousel对象。你也可以在这里看到3个选项的carousel控件对象。

因此，我一直在尝试找出问题所在，但未能做到这一点。我试着实现owl-carousel gem并摆弄代码。同样作为警告，该模板附带了自己的owl-carousel js文件，该文件为owl函数添加了许多细节和额外内容，因此owl carousel的调用方式可能不一定与您希望看到的方式相同。我还试着稍微修改一下代码，因为在html代码中，owl carousel是由一个class和一个id调用的，但是单独操作和删除变量，似乎每个变量都是carousel对象所必需的。

但是，有没有人以前有过这样的经历或者有什么洞察力？或者这是我第一次尝试转换整个javascript模板，但这不是我第一次遇到rails的js问题，所以我的依赖项/资产管道可能有问题吗？

很抱歉发了这么长的帖子。html文件的owl carousel部分的相关代码如下：

<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_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";

application.js

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

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

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

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

一些scripts.js模板文件

(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
                }
            }
        });

在控制台中，我还得到了一个错误"tooltip is not a function“，这表明我的jquery可能实现正确。但是，tooltip是在scripts.js文件中调用任何owl carousel函数之后调用的。这还能引起人们的关注吗？

Answer 1

算了，我知道了。这与我在application.html文件中调用的一个单独的Javascript相关函数有关。谢谢！:D

Answer 2

                <div class="col-md-12">
                    <div class="owl-carousel owl-theme" id="testimonials">
                        <div class="item">


                        </div>
                        <div class="item">


                        </div>

                        <div class="item testimonial text-center">

                        </div>


                    <div class="custom-owl-nav">
                      <span class="custom-owl-next">
                        <img src="img/right-arrow.png">
                      </span>

                      <span class="custom-owl-prev">
                        <img src="img/right1.png">

                      </span>
                    </div>
                </div>



            <script>

        $(document).ready(function() {
            //responsive menu toggle
            $("#menutoggle").click(function() {
                $('.xs-menu').toggleClass('displaynone');

                });
            //add active class on menu
            $('ul li').click(function(e) {
                e.preventDefault();
                $('li').removeClass('active');
                $(this).addClass('active');
            });
        //drop down menu    
                $(".drop-down").hover(function() {
                    $('.mega-menu').addClass('display-on');
                });
                $(".drop-down").mouseleave(function() {
                    $('.mega-menu').removeClass('display-on');
                });

        });

`

owl轮播自己的函数make`