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