将 SwiperJS 与 Browserify 结合使用
Using SwiperJS with Browserify
我正在尝试在我的 Browserify 包中使用 SwiperJS 的 jQuery 插件...但是出现以下错误:
Uncaught TypeError: $(...).swiper is not a function
我使用的精简(bear minimal)代码如下:
'use strict';
global.$ = require('jquery');
require('./plugins/swiper.jquery.js');
$(function() {
$('#hero').swiper();
});
在 SwiperJS 插件的底部,他们这样做:
if (typeof(module) !== 'undefined')
{
module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.Swiper;
});
}
似乎为此用途正确设置了它。
谁能帮我解释为什么会这样?我敢肯定,这可能非常简单。
您需要将插件公开给全局插件。我认为:)
'use strict';
global.$ = require('jquery');
window.Swiper = require('./plugins/swiper.jquery.js');
console.info(jQuery.fn.Swiper); //to test if the plugin has been loaded
经过多次纠缠,我决定尝试 Vanilla JS 版本的 Swiper,而不是 jQuery / Zepto 端口。这样做修复了错误并且 Swiper 工作。
配置有点不同,但最终看起来像这样:
我使用 Swiper 的英雄模块:
'use strict';
var cache = require('./cache.js'),
swiper = require('../plugins/swiper.js');
function init() {
if (cache.$hero.length) {
var hero;
hero = new swiper(cache.$hero, {
autoplay: 2000,
direction: 'horizontal',
loop: true,
speed: 700,
grabCursor: true
});
console.info(hero);
}
}
module.exports = function() {
return init();
};
cache.$hero
只是我的选择器,来自我的 cache
模块 - 看起来像(以防万一你想知道那是什么):
var cache = {
$hero: $('#hero')
};
希望这最终能对某人有所帮助。不知道为什么 jQuery 版本不起作用。对此有任何进一步的了解,我们将不胜感激。谢谢!
我像这样使用 idangero 滑动器没有问题:
require('./swiper.jquery.min.js');
var Swiper = require('./swiper.min.js');
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
effect: 'fade',
fade: { crossFade : true }
});
我正在尝试在我的 Browserify 包中使用 SwiperJS 的 jQuery 插件...但是出现以下错误:
Uncaught TypeError: $(...).swiper is not a function
我使用的精简(bear minimal)代码如下:
'use strict';
global.$ = require('jquery');
require('./plugins/swiper.jquery.js');
$(function() {
$('#hero').swiper();
});
在 SwiperJS 插件的底部,他们这样做:
if (typeof(module) !== 'undefined')
{
module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.Swiper;
});
}
似乎为此用途正确设置了它。
谁能帮我解释为什么会这样?我敢肯定,这可能非常简单。
您需要将插件公开给全局插件。我认为:)
'use strict';
global.$ = require('jquery');
window.Swiper = require('./plugins/swiper.jquery.js');
console.info(jQuery.fn.Swiper); //to test if the plugin has been loaded
经过多次纠缠,我决定尝试 Vanilla JS 版本的 Swiper,而不是 jQuery / Zepto 端口。这样做修复了错误并且 Swiper 工作。
配置有点不同,但最终看起来像这样:
我使用 Swiper 的英雄模块:
'use strict';
var cache = require('./cache.js'),
swiper = require('../plugins/swiper.js');
function init() {
if (cache.$hero.length) {
var hero;
hero = new swiper(cache.$hero, {
autoplay: 2000,
direction: 'horizontal',
loop: true,
speed: 700,
grabCursor: true
});
console.info(hero);
}
}
module.exports = function() {
return init();
};
cache.$hero
只是我的选择器,来自我的 cache
模块 - 看起来像(以防万一你想知道那是什么):
var cache = {
$hero: $('#hero')
};
希望这最终能对某人有所帮助。不知道为什么 jQuery 版本不起作用。对此有任何进一步的了解,我们将不胜感激。谢谢!
我像这样使用 idangero 滑动器没有问题:
require('./swiper.jquery.min.js');
var Swiper = require('./swiper.min.js');
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
effect: 'fade',
fade: { crossFade : true }
});