Magento – magento 2: Slick JS does not work when loaded from require JS

jquerymagento-2.1magento2PHPrequirejs

There is no error in console and when I tried to put the log "Slick is on "on the on-init function, it displayed correctly.

My theme require-config js :

var config = {

  deps: [
    "js/mainsite",
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/slick.min',
    'dropdown': 'js/vendor/dropdown',
    'magnificPopup': 'js/vendor/jquery.magnific-popup.min',

  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // from jQuery).
  // Exports: if the library it's not AMD aware, you need to tell requirejs what 
  // to look to know the script loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],      
      // exports: 'jQuery.fn.slick',
    },
    'magnific-popup': {
      deps: ['jquery'],
      // exports: 'magnificPopup',
    }
  }

};

My mainsite js:

define([
  "jquery",
  "slick",
  "magnificPopup"
], 
function($) {
  "use strict";

  // Here your custom code...
    $(document).ready(function(){
            $(".mobile-nav-button").click(function(){
                $(".menus").slideToggle(300);
            });
            $(".mobile-header-append-button").click(function(){
                $(this).siblings(".append-list").slideToggle(200);
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                } else {
                    $(this).addClass("active");
                }
            });
            $(window).resize(function(){
                if(window.innerWidth >= 1024) {
                    $(".append-list").removeAttr("style");
                    $(".menus").removeAttr("style");
                }
            });



            $(".selection").click(function(){
                for(var i = 0; i < 2; i++){
                    if($(this).hasClass("selection-" + i)){
                        $(".context-" + i).show();
                        $(".video-" + i).show();
                        if($(".selection-" + i).hasClass("active") == false){
                            $(".selection-" + i).addClass("active");
                        }
                    } else {
                        $(".context-" + i).hide();
                        $(".video-" + i).hide();
                        if($(".selection-" + i).hasClass("active") == true){
                            $(".selection-" + i).removeClass("active");
                        }
                    }
                }
            });
            $(".new").hover(function(){
                if(window.innerWidth >= 1024) {
                    for(var i = 0; i < 3; i++){
                        if($(this).hasClass("new-" + i)){
                            if($(".pointer-" + i).hasClass("active") == false){
                                $(".pointer-" + i).addClass("active");
                                $(".photo-" + i).show();
                            }
                        } else {
                            if($(".pointer-" + i).hasClass("active") == true){
                                $(".pointer-" + i).removeClass("active");
                                $(".photo-" + i).hide();
                            }
                        }
                    }
                }
            });

            function checkMobileNew() {
                $(".photo").removeAttr("style");
                if (window.innerWidth < 1024) {
                    $(".new").hide();
                    $($(".new")[0]).show();
                    $(".pointer").hide();
                } else {
                    $(".new").removeAttr("style");
                    $(".pointer").removeAttr("style");
                }
            }
            checkMobileNew();
            $(window).resize(function(){
                checkMobileNew();
            });

            $(".banners").slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: false,
                dots: true,
                prevArrow: null,
                nextArrow: null,
                onInit: function() {
                console.log('Slick is on!');
                }
            });

            $(".products").slick({
                dots: false,
                slidesToShow: 3,
                slidesToScroll: 1,
                infinite: false,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 800,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
            $(".benefits").slick({
                dots: false,
                slidesToShow: 5,
                slidesToScroll: 1,
                infinite: false,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 540,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 380,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
            $('.video-nav').magnificPopup({
                type: 'iframe',
                mainClass: 'mfp-fade',
                removalDelay: 160,
                preloader: false,

                fixedContentPos: false
            });
        });
  return;
});

Best Answer

Try this

define([
 "jquery",
 "slick",
 "magnificPopup"
], function($, slick) { 
   // Your code in here 
});