Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using requireJS with a jQuery plugin

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

like image 620
numediaweb Avatar asked Oct 21 '22 01:10

numediaweb


1 Answers

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 :)

like image 51
numediaweb Avatar answered Oct 23 '22 02:10

numediaweb