0

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>
Improve this question
1

2 Answers 2

Reset to default
3

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.

Improve this answer
9
  • unfortunately it didn't work, the error continues
    – lucas
    Commented Jul 27, 2021 at 13:01
  • This is practically implemented in magento 2.4 as well. It should work. Might be you are doing somewhere wrong. Please show me your whole steps and code.
    – ZealousWeb
    Commented Jul 27, 2021 at 13:36
  • I'm using magento 2.3.5-p2, as soon as I add the file to default_head_blocks it generates an error
    – lucas
    Commented Jul 27, 2021 at 13:40
  • Which file you are adding in default_head_blocks.xml file
    – ZealousWeb
    Commented Jul 27, 2021 at 13:49
  • 1
    Tried, thank you very much worked. you deserved the best answer
    – lucas
    Commented Jul 31, 2021 at 22:07
0

create the requirejs-config.js in your theme below path,

path : app/design/frontend/[theme_name]

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

and add the slik.min.js in path : app/design/frontend/[theme_name]/web/js

add the Your custom.js in below path,

path : app/design/frontend/[theme_name]/web/js

require(['jquery','slick'], 
  function($){
    $(document).ready(function() {
        $('.best-seller-items').slick({
            //your code
        })
    });
 });

After run the below commnds,

php bin/magento s:up
php bin/magento s:s:d -f --language_code
php bin/magento c:f
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.