why is slick carousel not working with browserify?

Question

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?

Please checked package.json file. slick-carousel is installed or not? — Prasanna, Jun 02 '15 at 09:53
seems not installed, but why? It seems to be applying some classes to my dom elements... — Dine, Jun 02 '15 at 10:00
Installed 1st then use "slick-carousel" function. You are requring the file but not installed "slick-carousel", then how you can access the functions. — Prasanna, Jun 02 '15 at 10:03
I did run 'npm install slick-carousel' and it said: 'slick-carousel@1.5.5 node_modules/slick-carousel' so why is it not installed then? — Dine, Jun 02 '15 at 11:20
Check your node_module folder, slick-carousel folder is present or not? — Prasanna, Jun 02 '15 at 11:34
Please check here https://www.npmjs.com/package/slick-carousel — Prasanna, Jun 02 '15 at 12:33
hm this'll be tricky as it's a browserify related issue... ? Or any ideas? — Dine, Jun 02 '15 at 14:44

HADI · Answer 1 · 2017-08-02T06:04:07.843

4

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.

edited Aug 02 '17 at 06:04

answered Jul 25 '15 at 16:52

HADI

2,829
1
26
26

Can you rewrite it, It is so confusing replace what with what. – localhost Jul 26 '17 at 13:40
@nofel try pull latest slick carousel and author might fixed that. If still not fixed then open slick carousel and find the code block as per i mentioned and delete that and paste respective code like above. – HADI Aug 02 '17 at 06:01
Can u filter your code. It's really hard to understand if I should find all of chuck of code and replace it with small bit or how? – localhost Aug 02 '17 at 06:38

score 1 · Answer 2 · answered Apr 08 '16 at 11:10

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:

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

score 1 · Answer 3 · answered Jul 10 '16 at 20:47

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

score 0 · Answer 4 · answered Jul 19 '15 at 18:04

0

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

it works for me.

answered Jul 19 '15 at 18:04

nineteen

1

4

Please [edit] your answer and explain **why** this helps. – Jan Doggen Jul 19 '15 at 18:25

score 0 · Answer 5 · answered Feb 07 '19 at 18:24

0

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

answered Feb 07 '19 at 18:24

jyotishman saikia

2,079
1
15
11

then use as import slick from 'slick-carousel' – jyotishman saikia Feb 07 '19 at 18:24
You should add an explanation of why this is the answer. – static_cast Feb 07 '19 at 18:43

why is slick carousel not working with browserify?

5 Answers5

Linked