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。

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

因此，进一步研究这一点，似乎在前两个（？）猫头鹰轮播对象中创建了一个猫头鹰轮播对象，您可以看到here。您还可以在此处查看3选项轮播控制对象。

所以我一直想弄清楚什么是错的，但却无法做到。我已经尝试实现owl-carousel gem并摆弄代码。另外作为警告，模板附带了它自己的owl-carousel js文件，它为owl函数添加了许多特性和附加功能，因此owl轮播可能不一定被称为通常的方式，因为你希望是能够看到。我也尝试过更改代码，因为在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";

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

我还在控制台中收到“工具提示不是函数”的错误，这表明我的jquery可能正确实现。但是，在scripts.js文件中调用任何owl轮播函数后，工具提示被称为方式。这仍然可以引起关注吗？

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

        });

`

猫头鹰轮播自身功能make`

Owl Carousel模板无法在Rails

2 个答案: