Using SwiperJS with Browserify

Question

I am trying to use the jQuery plugin of SwiperJS in my Browserify bundle...but get the following error:

Uncaught TypeError: $(...).swiper is not a function

The stripped down (bear minimal) code I am using is as follows:

'use strict';

global.$ = require('jquery');
require('./plugins/swiper.jquery.js');

$(function() {
    $('#hero').swiper();
});

At the bottom of the SwiperJS plugin they do:

if (typeof(module) !== 'undefined')
{
    module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
    define([], function () {
        'use strict';
        return window.Swiper;
    });
}

Which seems to correctly set it up for this use.

Can anybody help me with why this is happening? Probably something very simple I'm sure.

Michael Giovanni Pumo · Accepted Answer · 2015-12-03 22:16:52Z

After much hair pulling, I decided to try the Vanilla JS version of Swiper, as opposed to the jQuery / Zepto port. Doing so fixed the errors and the Swiper works.

Configuration was a little different but ended up looking like this:

My Hero Module that uses 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 is simply my selector that comes from my cache module - looking something like (just in case you were wondering what that was about):

var cache = {
    $hero: $('#hero')
};

Hope this ends up helping someone. No idea why the jQuery version didn't work. Any further light on that would be appreciated. Thanks!

Jamie Hutber · Accepted Answer · 2015-12-03 20:12:12Z

0

You'll need to expose the plugin to the global plugin. I think :)

 '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

answered Dec 3, 2015 at 20:12

Jamie Hutber

28.2k54 gold badges194 silver badges314 bronze badges

1 Comment

Michael Giovanni Pumo Over a year ago

No joy. Getting undefined. Eek.

tsveti_iko · Accepted Answer · 2017-01-02 16:45:20Z

0

I am using the idangero swiper like this without an issue:

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

answered Jan 2, 2017 at 16:45

tsveti_iko

8,1705 gold badges56 silver badges42 bronze badges

Collectives™ on Stack Overflow

Using SwiperJS with Browserify

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related