How to add Slick in Magento 2?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
1
down vote

favorite

I have added slick.min.js in my custom module in the path below

app/code/company_name/vendor_name/mymodule/view/frontend/web/js/slick.min/js

and my slick initialization js for my template is

require([
 'jquery',
 'slick'
], function ($) 
$(document).ready(function () 
 $(".slider").slick(
 autoplay: true,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2000,

 );
);
);

and added in requirejs-config.js as

var config = 
 paths: 
 'slick': "xxx_yyy/js/slick.min"
 ,
 map: 
 '*': 
 slickSlider: 'xxx_yyy/js/slick-slider'
 
 ,
 shim: 
 slick: 
 deps: ['jquery']
 
 ,
;

Now it is working except the design. How to add slick.less and slick-theme.less files in custom module?

asked 38 mins ago

Pavitra

616

add a commentÂ |Â

up vote
1
down vote

favorite

I have added slick.min.js in my custom module in the path below

app/code/company_name/vendor_name/mymodule/view/frontend/web/js/slick.min/js

and my slick initialization js for my template is

require([
 'jquery',
 'slick'
], function ($) 
$(document).ready(function () 
 $(".slider").slick(
 autoplay: true,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2000,

 );
);
);

and added in requirejs-config.js as

var config = 
 paths: 
 'slick': "xxx_yyy/js/slick.min"
 ,
 map: 
 '*': 
 slickSlider: 'xxx_yyy/js/slick-slider'
 
 ,
 shim: 
 slick: 
 deps: ['jquery']
 
 ,
;

Now it is working except the design. How to add slick.less and slick-theme.less files in custom module?

asked 38 mins ago

Pavitra

616

add a commentÂ |Â

up vote
1
down vote

favorite

I have added slick.min.js in my custom module in the path below

app/code/company_name/vendor_name/mymodule/view/frontend/web/js/slick.min/js

and my slick initialization js for my template is

require([
 'jquery',
 'slick'
], function ($) 
$(document).ready(function () 
 $(".slider").slick(
 autoplay: true,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2000,

 );
);
);

and added in requirejs-config.js as

var config = 
 paths: 
 'slick': "xxx_yyy/js/slick.min"
 ,
 map: 
 '*': 
 slickSlider: 'xxx_yyy/js/slick-slider'
 
 ,
 shim: 
 slick: 
 deps: ['jquery']
 
 ,
;

Now it is working except the design. How to add slick.less and slick-theme.less files in custom module?

asked 38 mins ago

Pavitra

616

I have added slick.min.js in my custom module in the path below

app/code/company_name/vendor_name/mymodule/view/frontend/web/js/slick.min/js

and my slick initialization js for my template is

require([
 'jquery',
 'slick'
], function ($) 
$(document).ready(function () 
 $(".slider").slick(
 autoplay: true,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2000,

 );
);
);

and added in requirejs-config.js as

var config = 
 paths: 
 'slick': "xxx_yyy/js/slick.min"
 ,
 map: 
 '*': 
 slickSlider: 'xxx_yyy/js/slick-slider'
 
 ,
 shim: 
 slick: 
 deps: ['jquery']
 
 ,
;

Now it is working except the design. How to add slick.less and slick-theme.less files in custom module?

slider magento2.2.6 js-css

asked 38 mins ago

Pavitra

616

asked 38 mins ago

Pavitra

616

asked 38 mins ago

Pavitra

616

asked 38 mins ago

Pavitra

616

asked 38 mins ago

Pavitra

616

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

You can create a '_module.less' file and then call your less files in it.

Add your 'slick.less' and 'slick-theme.less' file under the following directory

app/code/Vendor/Module/view/frontend/web/css/source

Now create '_module.less' file as given below

app/code/Vendor/Module/view/frontend/web/css/source/_module.less

@import 'slick.less';
@import 'slick-theme.less';

Then run the deploy command

php -dmemory_limit=2G bin/magento setup:static-content:deploy -f

edited 5 mins ago

answered 16 mins ago

Dinesh Yadav

3,3971731

Thanks for the Reply!!! It worked...!!!
â€“Â Pavitra
9 mins ago

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',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f245475%2fhow-to-add-slick-in-magento-2%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

You can create a '_module.less' file and then call your less files in it.

Add your 'slick.less' and 'slick-theme.less' file under the following directory

app/code/Vendor/Module/view/frontend/web/css/source

Now create '_module.less' file as given below

app/code/Vendor/Module/view/frontend/web/css/source/_module.less

@import 'slick.less';
@import 'slick-theme.less';

Then run the deploy command

php -dmemory_limit=2G bin/magento setup:static-content:deploy -f

edited 5 mins ago

answered 16 mins ago

Dinesh Yadav

3,3971731

Thanks for the Reply!!! It worked...!!!
â€“Â Pavitra
9 mins ago

add a commentÂ |Â

up vote
2
down vote

accepted

You can create a '_module.less' file and then call your less files in it.

Add your 'slick.less' and 'slick-theme.less' file under the following directory

app/code/Vendor/Module/view/frontend/web/css/source

Now create '_module.less' file as given below

app/code/Vendor/Module/view/frontend/web/css/source/_module.less

@import 'slick.less';
@import 'slick-theme.less';

Then run the deploy command

php -dmemory_limit=2G bin/magento setup:static-content:deploy -f

edited 5 mins ago

answered 16 mins ago

Dinesh Yadav

3,3971731

Thanks for the Reply!!! It worked...!!!
â€“Â Pavitra
9 mins ago

add a commentÂ |Â

up vote
2
down vote

accepted

You can create a '_module.less' file and then call your less files in it.

Add your 'slick.less' and 'slick-theme.less' file under the following directory

app/code/Vendor/Module/view/frontend/web/css/source

Now create '_module.less' file as given below

app/code/Vendor/Module/view/frontend/web/css/source/_module.less

@import 'slick.less';
@import 'slick-theme.less';

Then run the deploy command

php -dmemory_limit=2G bin/magento setup:static-content:deploy -f

edited 5 mins ago

answered 16 mins ago

Dinesh Yadav

3,3971731

You can create a '_module.less' file and then call your less files in it.

Add your 'slick.less' and 'slick-theme.less' file under the following directory

app/code/Vendor/Module/view/frontend/web/css/source

Now create '_module.less' file as given below

app/code/Vendor/Module/view/frontend/web/css/source/_module.less

@import 'slick.less';
@import 'slick-theme.less';

Then run the deploy command

php -dmemory_limit=2G bin/magento setup:static-content:deploy -f

edited 5 mins ago

answered 16 mins ago

Dinesh Yadav

3,3971731

edited 5 mins ago

answered 16 mins ago

Dinesh Yadav

3,3971731

answered 16 mins ago

Dinesh Yadav

3,3971731

answered 16 mins ago

Dinesh Yadav

3,3971731

Thanks for the Reply!!! It worked...!!!
â€“Â Pavitra
9 mins ago

add a commentÂ |Â

Thanks for the Reply!!! It worked...!!!
â€“Â Pavitra
9 mins ago

Thanks for the Reply!!! It worked...!!!
â€“Â Pavitra
9 mins ago

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky