所以我在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>&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>&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轮播函数后，工具提示被称为方式。这仍然值得关注吗？
没关系，我明白了。它与我在application.html文件中调用的单独的Javascript相关函数有关。谢谢！ ：d
<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`