时间戳

首页 > 解决方案 > 如何使用 NPM 和 Gulp 安装 Slick Carousel？

jquery - 如何使用 NPM 和 Gulp 安装 Slick Carousel？

问题描述

npm install slick-carousel除了在npm website上，我找不到任何关于此的文档。我没有太多以这种方式安装插件的经验，所以如果有人能帮我一把，那就太好了。

这是我到目前为止收集到的：

但是然后呢？我见过有人说我也需要我的和文件require/import中的一些文件，但我似乎无法弄清楚哪些或如何？我没有添加任何东西。global.jsstyle.scss

有人可以给我一个快速的纲要，或者指出我在哪里阅读它的正确方向，因为我真的迷路了？

谢谢！

标签： jquerynpminstallationgulpslick.js

解决方案

他们正在谈论您可以对文件执行的捆绑过程。如果你不熟悉这个概念，你可以想象 Gulp（我知道你正在使用它）可以获取少量文件，修改它们，然后将它们编译成更复杂的东西：比如编译你的 scss 或更少的文件css，或者让您使用较新版本的 javascript 并将其转换为与当前较少的浏览器兼容的代码。有兴趣可以从这里开始

https://css-tricks.com/gulp-for-beginners/

在光滑轮播的情况下，您可以执行以下操作：

脚本

import $ from 'jquery'
import 'slick-carousel'
    
window.jQuery = window.$ = $;

风格

在我的资产文件夹中，我从项目目录中的 node_modules 复制资产：

slick
|_fonts 
|_ajax-loader.gif 
|_slick.scss / .less
|_slick-theme.scss / .less

这是因为我可以轻松地将它们导入到我的项目中，并根据需要进行自定义

@import 'components/slick/slick';
@import 'components/slick/slick-theme'; // if you need default theme

初始化

$('.carousel-selector').slick({
    //options
});

最后一点：npm 包 slick-carousel 已经过时（1.8.1 版）如果你需要 1.9，你可以在 npm 包 slick-carousel-latest 中找到它。在这种情况下，脚本部分的第一部分变为：

import $ from 'jquery'
import 'slick-carousel-latest'

window.jQuery = window.$ = $;

我希望这会有所帮助，干杯！

推荐阅读