3

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?

4

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
0

Its may be help to you ...........

https://blog.padoosoft.com/magento-2-with-slick-carousel/

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.