如何三步初始化Slick轮播插件jQuery轮播完整指南【免费下载链接】slickthe last carousel youll ever need项目地址: https://gitcode.com/GitHub_Trending/sl/slickSlick轮播插件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 relstylesheet hrefslick/slick.css link relstylesheet hrefslick/slick-theme.css script srcjquery.min.js/script script srcslick/slick.min.js/scriptslick.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 classgallery divimg srcimg/1.jpg alt轮播图1/div divimg srcimg/2.jpg alt轮播图2/div divimg srcimg/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 youll ever need项目地址: https://gitcode.com/GitHub_Trending/sl/slick创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考