我正在构建一个带有图像滑块的页面。我在之前的项目中测试了JS和HTML,而不是我只需要它在Meteor上工作。
我在mrt add jquery
添加了jQuery,然后将其他javascript文件添加到我在client/lib
创建的文件夹中。但是现在我收到了这个错误
ReferenceError: Swipe is not defined
这是我的模板
<template name="imageSlider">
<h1>Cases</h1>
<div class="casesContainer">
<div class="caseTitle">
<span class="caseNumber">Case</span>
<div class="wrap">
<span class="caseBack" onclick='mySwipe.prev()'>Back</span>
<span class="caseForward" onclick='mySwipe.next()'>Forward</span>
</div>
</div>
<div id='caseSlider' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
</div>
</div>
</template>
这是我的swipe-init.js
var elem = document.getElementById('caseSlider');
window.caseSlider = Swipe(elem, {
startSlide: 1,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
答案 0 :(得分:1)
评论中提及的emgee看起来像是一个命名空间问题。
在提取swipe.js文件并查看后,似乎就是这样。
如果你看一下这个功能:
function Swipe(container, options) {
"use strict";
// utilities
var noop = function() {}; // simple no operation function
var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
// chec...
您将看到它不在全球范围内。在meteor中使用function关键字定义函数时,只能在该文件中访问它。要使其全局化,您应将其更改为:
Swipe = function(container, options) {
"use strict";
// utilities
var noop = function() {}; // simple no operation function
var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
// chec...