Javascript 斯莱没有';不要在wordpress模板上工作
我开始在我基于wordpress的网站上实现一个名为Sly的Javascript滑块,该网站是使用子主题设计的模板()。当我检查元素时,我可以看到插件几乎正常工作,例如计算总宽度,在单击“上一步”和“下一步”按钮时将活动类添加到项目中,以及在拖动幻灯片时拖动的类 我发现的问题是translate X没有出现在幻灯片的样式中,浏览器控制台显示“UncaughtTypeError:undefined不是一个函数:render:sly.js?ver=4.1.1:467” 如果你能给我提些建议,我将不胜感激 下面是我的代码: CSS:Javascript 斯莱没有';不要在wordpress模板上工作,javascript,jquery,css,wordpress,Javascript,Jquery,Css,Wordpress,我开始在我基于wordpress的网站上实现一个名为Sly的Javascript滑块,该网站是使用子主题设计的模板()。当我检查元素时,我可以看到插件几乎正常工作,例如计算总宽度,在单击“上一步”和“下一步”按钮时将活动类添加到项目中,以及在拖动幻灯片时拖动的类 我发现的问题是translate X没有出现在幻灯片的样式中,浏览器控制台显示“UncaughtTypeError:undefined不是一个函数:render:sly.js?ver=4.1.1:467” 如果你能给我提些建议,我将不胜
#frame { width: 100%; height: 100%; padding: 0; overflow:hidden;}
#frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
#frame .slidee li {
display: inline-block;
margin: 0 40px 0 0;
margin: 0 4rem 0 0;
padding: 0;
width: 600px;
height: 100%;
}
jQuery(document).ready(function($){
'use strict';
(function () {
var $frame = $('#frame');
var $wrap = $frame.parent();
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
});
HTML:
JS:
#frame { width: 100%; height: 100%; padding: 0; overflow:hidden;}
#frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
#frame .slidee li {
display: inline-block;
margin: 0 40px 0 0;
margin: 0 4rem 0 0;
padding: 0;
width: 600px;
height: 100%;
}
jQuery(document).ready(function($){
'use strict';
(function () {
var $frame = $('#frame');
var $wrap = $frame.parent();
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
});
sly.js的第467行是什么?这是一行:pos.cur=animation.from+animation.delta*$.easing[o.easing](animation.time/o.speed,animation.time,0,1,o.speed);对于Jrod,我发现我没有在我的网站上加载jQuery-easing插件,加载后一切都运行得很好。你的问题给了我重新思考的机会。谢谢;)伟大的很高兴你工作顺利。