using requireJS with a jQuery plugin

Question

I need to use this slider plugin "slick" inside my code but couldn't achieve it!

define('modules/slider', ['jquery', 'slick'], function($, slick) {
    var widgetDisplay = function() {};
    widgetDisplay.prototype = {
        name: 'Display',
        init: function(scope) {
            "use strict";

            var me = this;

            console.log('slider module loaded + ' + slick);

        }
    };

    return widgetDisplay;
});

In the config, I have;

require.config({
        baseUrl: '<?php echo WPF__ASSETS; ?>scripts/',
        paths: {
            "modernizr": "<?php echo WPF__ASSETS; ?>scripts/modernizr",
            "jquery": "<?php echo WPF__ASSETS; ?>scripts/jquery",
            "fastclick": "<?php echo WPF__ASSETS; ?>scripts/fastclick",            
            "foundation": "<?php echo WPF__ASSETS; ?>scripts/foundation",
            "slick": "<?php echo WPF__ASSETS; ?>scripts/slick"
        },
        shim: {
            'foundation': {
                deps: ['jquery']
            },
            'slick': {
                deps: ['jquery'],
                exports: 'jQuery.fn.slick'
            },
            'modernizr': {
                exports: 'modernizr'
        }
        }
    });

But his outputs; Uncaught ReferenceError: slick is not defined

numediaweb · Accepted Answer · 2014-09-15 21:35:34Z

3

Oops! I found out why I got errors :)

First fix, I removed slick on the function; define('modules/slider', ['jquery', 'slick'], function($){

The console.log thing was wrong, I used instead;

$('#header_slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            onInit: function() {
                console.log('Slick is on!');
            }
});

Thanks :)

answered Sep 15, 2014 at 21:35

numediaweb

17.2k12 gold badges79 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using requireJS with a jQuery plugin

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related