Why does a smooth carousel not work with a browser?

Question

I am trying to use a smooth carousel ( http://kenwheeler.imtqy.com/slick/ ) and installed via npm.

Including it using a browser, for example:

slick = require('slick-carousel') 

trying to work as follows:

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

There are no console errors, the carousel is not initialized. What's happening?

Answer 1

NOTE. It is not recommended to edit the library. If you still want, if you want a workaround then you can follow as shown below.

I also had the same issue using slick with a browser, but none of the solutions worked for me. Then I take in slick.js and change -

To 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 last line -

Search:

 })); 

Replace:

 })( jQuery, window, document ); 

Hope this helps to understand the problem.

Answer 2

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

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

The author suggests that if you use the CommonJS module loader (e.g. Browserify), you should have jQuery in your dependencies (it is called directly with require('jquery') ).

I prefer this solution:

• Add jQuery as an NPM dependency: npm install --save jquery
• Make global, for example. with a browser, bypass export exports or with: window.$ = window.jQuery = require('jquery');
• Then you can use Slick with require('slick-carousel');

Answer 3

I solved this problem in a different way. There is a npm slick-carousel-browserify package. So:

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

and

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

Answer 4

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

he works for me.