企业官网建设流程全解析

如何三步初始化Slick轮播插件：jQuery轮播完整指南

【免费下载链接】slickthe last carousel you'll ever need项目地址: https://gitcode.com/GitHub_Trending/sl/slick

Slick轮播插件（Slick carousel plugin）是一个基于 jQuery 的轮播（carousel，即网页中自动或手动滑动的图片组）插件。引入两个 CSS 文件和 1 个 JS 文件，再写几行配置代码，就能得到带箭头、分页圆点、触摸滑动的轮播。当前 2.0 版本兼容 jQuery 4，官方支持到 IE8，适合还在 jQuery 体系里的老站和新站。

🚀 最快上手：三步看到轮播效果

第一步，克隆仓库：

git clone https://gitcode.com/GitHub_Trending/sl/slick

第二步，用浏览器打开 index.html。这是作者的示例页，里面有垂直、中心、变宽、懒加载等 8 组轮播，刷新即可看到全部效果，不需要启动服务器。

第三步，在自己的页面里按同样顺序引入四个文件：

<link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> <script src="jquery.min.js"></script> <script src="slick/slick.min.js"></script>

slick.css 是布局基础样式，slick-theme.css 管箭头和圆点的样子，jQuery 必须放在 Slick 前面。注意 2.0 版本没有发布到 npm 或 Bower，用包管理器装的 slick-carousel 拿到的是 1.x，需要 2.0 就以上面的仓库为准。

🎯 三个最常用的轮播初始化配置

带分页圆点的基础横向轮播

一次显示 3 张图，底部出圆点，首尾相接：

$(function() { $(".gallery").slick({ dots: true, // 底部分页圆点 infinite: true, // 无限循环 slidesToShow: 3, // 一次显示几张 slidesToScroll: 1 // 每次滑动几张 }); });

容器就是几个并排的 div，每个 div 是一张幻灯片：

<section class="gallery"> <div><img src="img/1.jpg" alt="轮播图1"></div> <div><img src="img/2.jpg" alt="轮播图2"></div> <div><img src="img/3.jpg" alt="轮播图3"></div> </section>

配置项一共有 49 个，只写你要改的，其余保持默认。

用响应式断点按屏幕改显示张数

桌面端一次放 3 张，窄屏自动变 2 张、再窄变 1 张，不需要再写媒体查询：

$(".gallery").slick({ slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] });

把 settings 直接写成 "unslick"，可以指定某个宽度下彻底关闭轮播、还原成普通流式布局。

一个开关切换中心模式

当前图片居中放大，两侧各露出半张相邻图，是商品详情页常见的那种封面感：

$(".gallery").slick({ centerMode: true, centerPadding: "40px", slidesToShow: 3 });

想换成垂直滚动方向，同样是一行代码的事：vertical: true。

🧭 什么场景该用、什么场景别用

该用的情况：站点本来就基于 jQuery，页面上要放商品图墙、Banner 轮播；需要按屏幕宽度调整每屏张数，断点配置是内置的；还要兼容老浏览器，官方支持从 IE8 开始算。

别用的情况：站点是 React 或 Vue 这类组件体系，Slick 没有官方封装，硬塞会多带一份 jQuery 依赖；页面想要零依赖的纯 JS 方案，它做不到；需要 3D 之类的复杂转场，内置的过渡主要是滑动和淡入淡出，复杂效果得自己补。

📁 项目结构速览

• slick/：引用时唯一要用的目录，JS、CSS 和图标字体都在这里
• slick/slick.less 与 slick.scss：同一套样式的 LESS、SCSS 源文件，改箭头颜色、圆点大小时用
• index.html：官方示例页，验证任何配置项都先来这里抄写法
• Makefile：生成压缩版本的构建脚本

⚠️ 两个高频坑

箭头显示成方块。箭头和圆点不是图片，是图标字体。只拷了两个 CSS 文件、没拷 slick/fonts/ 目录，页面上箭头就是一排方块。把 fonts 目录一起拷走，确认相对路径对得上即可。

事件回调不触发。beforeChange 这类事件必须写在调用.slick()之前，初始化之后再挂就不生效了：

$(".gallery").on("beforeChange", function(e, slick, cur, next) { console.log(next); }); $(".gallery").slick({ dots: true });

把两个 CSS 和 JS 引进去，给容器写上dots: true再初始化，轮播就转起来了——挑几张现成的图，先跑通第一个再说。

【免费下载链接】slickthe last carousel you'll ever need项目地址: https://gitcode.com/GitHub_Trending/sl/slick