CODEWITHSUNDEEP
jquerybrowserifyslick.js
Dine
Dine

Reputation: 7283

why is slick carousel not working with browserify?

I'm trying to use slick carousel (http://kenwheeler.github.io/slick/) and installed via npm.

Including it via browserify like this:

slick = require('slick-carousel')

trying to run like this:

$('.gallery__carousel').slick();

No console errors, carousel not initialising. What's going on?

Upvotes: 6

Views: 5845

Answers (5)

jyotishman saikia
jyotishman saikia

Reputation: 2195

"browserify-shim": {
"jquery": "global:jQuery",
     "slick-carousel": {
      "depends": [
        "jquery: jQuery"
      ],
      "exports": "$.fn.slick"
    }
  },
  "browserify": {
    "transform": [
     "browserify-shim"
    ]
  }

Upvotes: 0

Hadi
Hadi

Reputation: 2905

NOTE: It's not recommended to edit library. If still in case you want a workaround then you can follow like below.

I also had the same problem with using slick with browserify but none of solutions worked for me. Then i take a took into slick.js and changed -

Find: 

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {

Replace:

;(function ( $, window, document, undefined ) {

add the last line -

Find:

}));

Replace:

})( jQuery, window, document );

Hope it helps to understand the problem.

Upvotes: 4

Anatoliy Tszyan
Anatoliy Tszyan

Reputation: 61

I've solved this problem another way. There is npm package slick-carousel-browserify. So:

npm install slick-carousel-browserify --save-dev

And:

$ = require ('./../../bower_components/jquery/dist/jquery.js');
slick = require('slick-carousel-browserify');
slick($('.selector'));

Upvotes: 1

Michał Pierzchała
Michał Pierzchała

Reputation: 1850

The problem occurs thanks to this code of Slick v1.5.x: 

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}

Author assumes, that if you use CommonJS module loader (like Browserify), you should have had jQuery in you dependencies (it's called directly with require('jquery')).

I prefer this solution:

  1. Add jQuery as NPM dependency: npm install --save jquery
  2. Make it global, e.g. with browserify-shim's export global or with: window.$ = window.jQuery = require('jquery');
  3. Then you can safely require Slick with require('slick-carousel');

Upvotes: 1

nineteen
nineteen

Reputation: 1

try to add
$ = require('jquery')
before
slick = require('slick-carousel')

it works for me.

Upvotes: 0

Related Questions