猫头鹰轮播模板在 Rails 中不起作用

Question

所以我是 Rails 的新手，但我一直在尝试为我正在为我和朋友之间的项目构建的电子商务网站转换模板。站点可以在这里找到：(demo2.transvelo.in/html/rimbus/index.php?page=fashion-v4&h=6&f=2)。但是，我在正确转换它时遇到了一些问题，主要是 Owl Carousel 应用程序似乎无法正常工作。

正如您在演示中看到的那样，猫头鹰轮播应该是这样运行的。在我实际收到的模板文件中——在非 Rails 环境中（只是纯 html/css/js？），模板文件实际上工作得很好，而且应该如此。看起来就像在演示页面上一样。

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

所以这里的第一个问题是轮播控件非常混乱。从图片中您可以看到，在当前页面上只有两个选项可以循环浏览，而不是应该存在的三个选项。然而，更奇怪的是，一旦你循环浏览页面，另一个轮播控制菜单就会出现在轮播的顶部（链接如下）。而且你看不到，因为不幸的是轮播占据了整个页面，另外两个轮播控制选项也同时存在，使得这种双轮播的东西。

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

所以我一直试图找出问题所在，但一直没能做到。我已经尝试实现 owl-carousel gem 并摆弄代码。同样作为警告，该模板附带了它自己的 owl-carousel js 文件，该文件为 owl 函数添加了许多特性和附加功能，因此 owl carousel 可能不一定像您希望的那样以通常的方式调用能够看到。我也尝试过稍微修改一下代码，因为在 html 代码中，owl carousel 由一个类和一个 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";

应用程序.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
                }
            }
        });

我还在控制台中收到“工具提示不是函数”的错误，这表明我的 jquery 可能正在正确实现。然而，在 scripts.js 文件中调用任何 owl carousel 函数之后，都会调用 tooltip。这仍然值得关注吗？

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 carousel自带函数make`