Slick JS dose not work on magento 2 when loaded from require JS
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;
});
magento2 php magento-2.1 jquery requirejs
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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;
});
magento2 php magento-2.1 jquery requirejs
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
0
0
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;
});
magento2 php magento-2.1 jquery requirejs
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
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;
});
magento2 php magento-2.1 jquery requirejs
magento2 php magento-2.1 jquery requirejs
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
asked Mar 1 '17 at 1:56
Billy VGBilly VG
7010
7010
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Try this
define([
"jquery",
"slick",
"magnificPopup"
], function($, slick) {
// Your code in here
});
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f162291%2fslick-js-dose-not-work-on-magento-2-when-loaded-from-require-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this
define([
"jquery",
"slick",
"magnificPopup"
], function($, slick) {
// Your code in here
});
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
add a comment |
0
Try this
define([
"jquery",
"slick",
"magnificPopup"
], function($, slick) {
// Your code in here
});
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
add a comment |
0
0
0
Try this
define([
"jquery",
"slick",
"magnificPopup"
], function($, slick) {
// Your code in here
});
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
Try this
define([
"jquery",
"slick",
"magnificPopup"
], function($, slick) {
// Your code in here
});
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
answered Mar 1 '17 at 2:13
mrtuvnmrtuvn
1,7251628
1,7251628
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
add a comment |
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
Thanks for you answer but It didn't work on my case.
– Billy VG
Mar 1 '17 at 6:15
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f162291%2fslick-js-dose-not-work-on-magento-2-when-loaded-from-require-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown