Magento2 – How to Load Slick Carousel or Any Other JS File

magento2requirejsslick

I'm trying to load the slick carousel into my magento theme and it generates a huge error: "Uncaught Error: Mismatched anonymous define() module". I think it must be related to require js, so I tried to add the following line of code to my require js, but it didn't solve the problem. How can I solve it?

enter image description here

The code I added:

 var config = {
paths: {  
        
        'slick': "Magento_Theme/js/slick/slick.min"
    },   
shim: {
    'slick': {
        deps: ['jquery']
    }
}
};

my default_head_blocks (head)

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <script src="js/jquery-1.12.2.min.js" />
        <script src="js/jquery-ui.js" />
        <script src="requirejs/require.js" />
        <script src="mage/polyfill.js" />
        <script src="js/slick.min.js"/>



        <css src="mage/calendar.css" />

        <css src="css/bootstrap.css" />
        <css src="css/slick.css" />

        <css src="css/style.css" rel="stylesheet" type="text/css" />
        <script src="js/owl.carousel.js"/>

        <css rel="stylesheet" type="text/css" src="https://use.fontawesome.com/releases/v5.15.1/css/all.css" src_type="url" />

    </head>

Best Answer

You don't need to add like above. You just need to add slick.min.js file in path app/design/frontend/PackageName/theme/web/js/

After that you just need to call jquery like below. You don't need to define anywhere. Please remove your code from requirejs-config.js file

require(['jquery',"mage/url",'mage/validation','js/slick.min'], function ($,url) {
    jQuery('.best-seller-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 5000
    });
});

Also please upload slick.css file in path app/design/frontend/PackageName/theme/web/css/

Call above css file in path app/design/frontend/PackageName/theme/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/slick.css"/>
        <script src="js/script.js"/>
    </head>
</page>

You can also put above jQuery code in file script.js which needs to be create in path app/design/frontend/PackageName/theme/web/js/

Your slider will work with above code.

Related Topic