向 Magento 2 主页添加光滑的轮播

Question

我对我认为应该是基本的东西有疑问，但我显然做错了什么，我想要做的就是使用 slick slider jquery 插件制作一个基本的横幅滑块。我的自定义主题运行良好，我已将 slick.min.js 下载到 app/design/frontend/Pyxis/pyxistheme/web/js/slick。min.js

然后我在我的 /web 文件夹中创建了 requirejs-config.js 并添加了这个：

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

当我查看页面源代码和文件时，我可以看到该代码。

我的问题是，当我将 jquery 代码添加到 CMS 页面时，即主页，如下所示：

<script>
    require([
        'jquery',
        'slick.min'
    ], function ($) {
        jQuery(document).ready(function () {
            jQuery(".home-banners").slick({
                dots: true,
                infinite: true,
                arrows: true,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
            });
        });
    });
</script>

我收到一个控制台错误，说找不到 slick.min.js？我的终端中有运行这些命令：

php bin/magento setup:upgrade
php -d memory_limit=2048M bin/magento setup:static-content:deploy en_GB -f
php -d memory_limit=2048M bin/magento cache:flush

知道为什么找不到我的 slick.min.js 文件吗？

谢谢

Answer 1

requirejs-config.js 的路径错误，您应该将其放在 app/design/frontend/Pyxis/pyxistheme/ 中，而不是 /web 中。

接下来，在 requirejs-config.js 中您映射 slick: 'js/slick.min'，但在 phtml 中您使用的是 slick.min。尝试更改为 slick.

在此之后，只需使用以下命令：

rm -rf var/view_preprocessed/* 
rm -rf pub/static/frontend/*
bin/magento setup:static-content:deploy en_GB -f
bin/magento cache:flush

向 Magento 2 主页添加光滑的轮播

Adding slick carousel to Magento 2 homepage

javascript

jquery

magento

magento2

slick.js