slick 是一个可以用在前端项目上的旋转木马组件.. 先为项目下载一下这个 slick ，进入到项目所在的目录，然后使用 npm install ，要安装的是 slick-carousel ..

npm install slick-carousel

完成以后，在 node_modules 目录的下面，你可以看到 slick-carousel .. 这个目录下的 slick 里面有我们需要的东西 ..

打开项目的 index.html .. 在 head 标签里面，去链接两个样式表 .. 一个是这个 slick.css .. 还有一个是 slick-theme.css .. 选中这个文件，按一下 m ，复制一下这个文件的地址 ..

然后在 body 标签结束的这个位置上 .. 我已经提前把 jQuery 嵌入进来了 .. 下面再把 slick 需要的 js 文件也链接过来 .. 就是这个 slick.js 或者 slick.min.js .. 复制一下 ...

现在就准备好了 slick 需要的东西 .. 下面再去设计一下幻灯片内容需要的 html .. 旋转木马的外部可以用一个容器包装一下 .. 这里使用一个 div .. 上面定义一个 css 类，一会儿要用到这个类去定位到这个元素 .. 叫它 slides ..

它里面就是一个旋转木马的项目 .. 每个项目可以使用一个 div 包装一下 .. 这里我准备好了一些旋转木马项目，里面的内容就是我从 500px 偷过来的一些摄影作品 ..

再去给这个旋转木马添加点简单的样式 .. 先在这个旋转木马的周围添加点边距 .. 使用 .slides 作为样式的选择器 .. margin .. 50px ..

因为这些旋转木马里的图片的高度都不太一样 .. 可以给它们一个统一的高度 .. 设置成 350px .. 添加点内边距 .. padding: 5px .. 再给它们一个白色的背景 ... 最后再添加点外边距 .. margin 10px ..

下面我们要用 JavaScript ，去初始化一下这个 slick 旋转木马 .. 用 jQuery .. 找到页面上的 .slides 这个类的元素 .. 再使用 slick 方法 ..

这里显示的就是一个基本的 slick 旋转木马 .. 左右两边会有一个控制按钮 .. 使用它们可以浏览旋转木马里面的不同的项目 .. 在移动设备上用户可以使用手指扫动的手势去控制旋转木马的播放 .. 在桌面设备上，我们也可以使用鼠标拖放的方式去控制它们 ..