0

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

Try this

define([
 "jquery",
 "slick",
 "magnificPopup"
], function($, slick) { 
   // Your code in here 
});
  • Thanks for you answer but It didn't work on my case. – Billy VG Mar 1 '17 at 6:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.