项目文章

搜索 TinyTools

slick一个完全响应式的滚动幻灯片的javascript库

28.6k 文档演示 Github仓库 Gitee仓库

slick

完全响应式。可随容器缩放。每个断点单独设置CSS3 可用时使用。不可用时完全正常运行。滑动功能已启用。或根据您的喜好禁用。桌面鼠标拖动无限循环，也可通过箭头键导航完全访问。

Demo

http://kenwheeler.github.io/slick

单循环

javascript 复制代码

$('.single-item').slick();

多项循环

javascript 复制代码

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

响应式显示

javascript 复制代码

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

可变宽度

javascript 复制代码

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

点击查看更多示例

CDN

要立即开始使用 Slick，有几种 CDN 选项可供选择以便尽可能快速地将文件提供给您的用户：

使用 jsDelivr 的示例

只需在 <head> 中添加指向 css 文件的链接即可：

html 复制代码

<!-- 如果您想要默认样式，请添加 slick-theme.css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- 如果您想要默认样式，请添加 slick-theme.css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

然后，在结束 <body> 标签前添加：

html 复制代码

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

包管理器

sh 复制代码

# Bower
bower install --save slick-carousel

# NPM
npm install slick-carousel

数据属性设置

在 slick 1.5 中，您现在可以使用 data-slick 属性添加设置。您仍然需要调用 $(element).slick() 来初始化元素上的 slick。

示例：

html 复制代码

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

设置

选项	类型	默认	描述
accessibility	布尔值	true	启用 Tab 键和箭头键导航。除非 `autoplay: true`，否则在幻灯片切换后将浏览器焦点设置为当前幻灯片（或当前幻灯片集的第一张，如果有多个 `slidesToShow`）。为了完全符合 A11y 规范，请在此基础上启用 focusOnChange。
adaptiveHeight	布尔值	false	使滑块高度适应当前幻灯片
appendArrows	字符串	$(element)	更改导航箭头的附加位置（选择器、htmlString、数组、元素、jQuery 对象）
appendDots	字符串	$(element)	更改导航点的附加位置（选择器、htmlString、数组、元素、jQuery 对象）
arrows	布尔值	true	启用下一个/上一个箭头
asNavFor	字符串	$(element)	启用多个滑块同步
autoplay	布尔值	false	启用幻灯片自动播放
autoplaySpeed	int	3000	自动播放更改间隔
centerMode	布尔值	false	启用居中视图，并显示部分上一张/下一张幻灯片。与 slidesToShow 计数为奇数时一起使用。
centerPadding	string	'50px'	居中模式下的侧边距。（px 或 %）
cssEase	string	'ease'	CSS3 缓动
customPaging	function	n/a	自定义分页模板。使用示例请参见源代码。
dots	布尔值	false	当前幻灯片指示器点
dotsClass	string	'slick-dots'	幻灯片指示器点容器的 Class
draggable	布尔值	true	启用桌面拖动
easing	string	'linear'	animate() 后备缓动
edgeFriction	integer	0.15	滑动非无限轮播边缘时的阻力
fade	boolean	false	启用淡入淡出
focusOnSelect	boolean	false	启用对选定元素的焦点（点击）
focusOnChange	boolean	false	更改后将焦点置于幻灯片上
infinite	boolean	true	无限循环
initialSlide	integer	0	滑动到起始位置
lazyLoad	string	'ondemand'	接受 'ondemand' 或 'progressive' 以进行延迟加载技术。'ondemand' 会在您滑动到图像时立即加载图像，'progressive' 会在页面加载时逐一加载图像。
mobileFirst	boolean	false	响应式设置使用移动优先计算
nextArrow	string (html \| jQuery 选择器) \| object (DOM 节点 \| jQuery 对象)	`<button type="button" class="slick-next">Next</button>`	允许您选择节点或自定义“下一步”箭头的 HTML。
pauseOnDotsHover	布尔值	false	鼠标悬停在点上时暂停自动播放
pauseOnFocus	布尔值	true	滑块获得焦点时暂停自动播放
pauseOnHover	布尔值	true	鼠标悬停时暂停自动播放
prevArrow	字符串 (html \| jQuery 选择器) \| 对象 (DOM 节点 \| jQuery 对象)	`<button type="button" class="slick-prev">Previous</button>`	允许您选择一个节点或自定义“上一个”箭头的 HTML。
respondTo	字符串	'window'	响应式对象响应的宽度。可以是 'window'、'slider' 或 'min'（两者中较小者）。
responsive	array	null	对象数组包含断点和设置对象（参见示例）。在给定的 `breakpoint` 处启用设置。将 `settings` 设置为 "unslick" 而不是一个对象，以在给定断点处禁用滑动。
rows	int	1	将此设置为大于 1 会初始化网格模式。使用 slidesPerRow 设置每行应包含多少个幻灯片。
rtl	boolean	false	将滑块的方向更改为从右到左
slide	string	''	幻灯片元素查询
slidesPerRow	int	1	通过 rows 选项初始化网格模式后，这将设置每个网格行中有多少个幻灯片。
slidesToScroll	int	1	一次滚动的幻灯片数量
slidesToShow	int	1	一次显示的幻灯片数量
speed	int	300	过渡速度
swipe	boolean	true	启用触摸滑动
swipeToSlide	boolean	false	无论 slidesToScroll 是否设置，滑动即可滑动
touchMove	布尔值	true	启用触摸滑动
touchThreshold	int	5	要前进幻灯片，用户必须滑动 (1/touchThreshold) * 滑块宽度的长度。
useCSS	布尔值	true	启用/禁用 CSS 过渡
useTransform	布尔值	true	启用/禁用 CSS 变换
variableWidth	布尔值	false	禁用自动幻灯片宽度计算
vertical	布尔值	false	垂直滑动方向
verticalSwiping	布尔值	false	将滑动方向更改为垂直
waitForAnimate	布尔值	true	忽略动画过程中前进幻灯片的请求
zIndex	数字	1000	设置幻灯片的 zIndex 值，适用于 IE9 及更低版本

响应式选项示例

响应式选项及其值非常独特且功能强大。您可以像这样使用它：

javascript 复制代码

$(".slider").slick({

  // normal options...
  infinite: false,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});

事件

在 Slick 1.4 中，回调方法已被弃用，并被事件取代。请在 Slick 初始化之前使用它们，如下所示：

javascript 复制代码

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

事件	参数	描述
afterChange	event, slick, currentSlide	幻灯片切换后回调
beforeChange	event, slick, currentSlide, nextSlide	幻灯片切换前回调
breakpoint	event, slick, breakpoint	到达断点后触发
destroy	event, slick	滑块被销毁或取消滑动时触发。
edge	event, slick, direction	在非无限模式下边缘过度滚动时触发。
init	event, slick	Slick 首次初始化时回调。请注意，此事件应在初始化滑块之前定义。
reInit	event, slick	每次 Slick （重新）初始化时回调
setPosition	event, slick	每次 Slick 重新计算位置时回调
swipe	event, slick, direction	滑动/拖动后触发
lazyLoaded	event, slick, image, imageSource	图像延迟加载后触发
lazyLoadError	event, slick, image, imageSource	图像加载失败后触发

方法

在 1.4 版本中，可以通过 slick 方法本身调用 slick 实例上的方法，如下所示：

javascript 复制代码

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

这种新语法还允许您调用任何内部巧妙的方法：

javascript 复制代码

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');

方法	参数	描述
`slick`	options : object	初始化 Slick
`unslick`		销毁 Slick
`slickNext`		触发下一张幻灯片
`slickPrev`		触发上一张幻灯片
`slickPause`		暂停自动播放
`slickPlay`		开始自动播放（也会将 `autoplay` 选项设置为 `true`）
`slickGoTo`	index : int, dontAnimate : bool	根据索引跳转到幻灯片，如果第二个参数设置为 true，则跳过动画
`slickCurrentSlide`		返回当前幻灯片索引
`slickAdd`	element : html 或 DOM 对象，index: int，addBefore: bool	添加幻灯片。如果提供了索引，则将在该索引处添加，如果设置了 addBefore，则添加到之前。如果未提供索引，则添加到末尾；如果设置了 addBefore，则添加到开头。接受 HTML 字符串
`slickRemove`	index: int, removeBefore: bool	按索引移除幻灯片。如果 removeBefore 设置为 true，则移除索引之前的幻灯片；如果未指定索引，则移除第一张幻灯片。如果 removeBefore 设置为 false，则移除索引之后的幻灯片；如果未设置索引，则移除最后一张幻灯片。
`slickFilter`	filter：选择器或函数	使用 jQuery .filter 语法过滤幻灯片
`slickUnfilter`		移除已应用的过滤器
`slickGetOption`	option：字符串（选项名称）	获取选项值。
`slickSetOption`	更改选项，“refresh”始终为“布尔值”，并将更新 UI 更改……
`option, value, refresh`	将单个“选项”更改为给定的“值”； `refresh` 是可选的。
`"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh`	更改或添加整套响应式选项
`{ option: value, option: value, ... }, refresh`	将 [多个 `option` 更改为相应的 `value`。

Example

初始化方式：

javascript 复制代码

$(element).slick({
  dots: true,
  speed: 500
});

使用以下方式改变速度：

javascript 复制代码

$(element).slick('slickSetOption', 'speed', 5000, true);

摧毁方式：

javascript 复制代码

$(element).slick('unslick');

Sass 变量

变量	类型	默认值	描述
$slick-font-path	字符串	"./fonts/"	光滑图标字体的目录路径
$slick-font-family	字符串	"slick"	光滑图标字体的字体系列
$slick-loader-path	字符串	"./"	加载器图像的目录路径
$slick-arrow-color	颜色	白色	左右箭头图标的颜色
$slick-dot-color	颜色	黑色	导航点的颜色
$slick-dot-color-active	颜色	$slick-dot-color	活动导航点的颜色
$slick-prev-character	字符串	'\2190'	上一个箭头图标的 Unicode 字符代码
$slick-next-character	字符串	'\2192'	下一个箭头图标的 Unicode 字符代码
$slick-dot-character	字符串	'\2022'	导航点图标的 Unicode 字符代码
$slick-dot-size	像素	6px	导航点的大小

浏览器支持

Slick 兼容 IE8+ 以及 Chrome、Firefox 和 Safari 等其他现代浏览器。

依赖项

jQuery 1.7

许可证

遵循 MIT 许可证。

与 Bacon 一样自由。

关于项目

MIT

Javascript

28,620

5834

532

2014-03-24

2025-11-10

slick一个完全响应式的滚动幻灯片的javascript库

slick

Demo

单循环

多项循环

响应式显示

可变宽度

CDN

使用 jsDelivr 的示例

包管理器

数据属性设置

设置

响应式选项示例

事件

方法

Example

Sass 变量

浏览器支持

依赖项

许可证

关于项目

增长趋势 - stars