Magento2 Slick滑动插件

2020年8月12日浏览量 26 1 min read

Slick是一个很棒的滑动插件，适用于任何产品列表，如Most Popular，Featured，Upsell，Cross sell产品或者任何其他定制的产品列表。我将指导您如何添加Slick滑动插件并将其应用于首页上的产品列表小部件。

让我们开始吧！

安装Slick

博客中用到的Slick版本为1.6.0

解压下载的文件夹并将slick.min.js复制到

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/

在下面路径中创建或编辑requirejs-config.js文件
```
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/
```

打开requirejs-config.js并复制/粘贴此代码：

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

在下面路径中创建“vendor”文件夹
```
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/
```
将slick.less和slick-theme.less复制到其中。
清除缓存和部署文件

打开前端，查看源代码并在代码下面的<head>标签中找到

<script type="text/javascript" src="http://_YOURDOMAIN_/pub/static/_VERSION_/_requirejs/frontend/_YOUR_VENDOR_/_YOUR_THEME_/en_US/requirejs-config.js"></script>

在文档的底部，您应该看到我们在步骤4中添加的代码。

将Slick应用于产品列表小部件

在下面的步骤中，我们将初始化Slick到产品列表小部件模板文件。

在主题的根目录中创建“Magento_CatalogWidget”文件夹，并将其复制到下面的文件夹中
```
vendor/magento/module-catalog-widget/view/frontend/templates
```

打开

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_CatalogWidget/templates/product/widget/content/grid.phtml

在下面示例代码的<?php endif; ?>结束之前，初始化Slick Carousel

<script>
    require([
        'jquery',
        'slick'
    ], function ($) {
        jQuery(document).ready(function () {
            jQuery(".widget-product-grid").slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                    {
                        breakpoint: 1280,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    });
</script>

在首页中创建并插入产品列表小部件

打开Magento Admin→Content →Pages →Home Page
内容→显示/隐藏编辑器→插入窗口小部件→窗口小部件类型（目录产品列表）→填充字段并选择条件（选择您想要的类别或产品）
保存小部件并保存页面
检查您的首页，您应该有Slick轮播产品列表小部件
最后一步是根据您的需求自定义Slicks样式！

Comments

发表评论，留下你的足迹

我们不会公开你的邮箱地址

Magento2 Slick滑动插件

安装Slick

将Slick应用于产品列表小部件

在首页中创建并插入产品列表小部件

搜索文章

分类

标签

最新文章