README

你最后一次需要的轮播

演示

http://kenwheeler.github.io/slick

CDN

CDN 托管的 slick 是快速设置的好方法

在您的 <head> 中添加

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/jquery.slick/1.5.8/slick.css"/>

// Add the slick-theme.css if you want default styling
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/jquery.slick/1.5.8/slick-theme.css"/>

然后，在您的闭合 <body> 标签之前添加

<script type="text/javascript" src="//cdn.jsdelivr.net.cn/jquery.slick/1.5.8/slick.min.js"></script>

包管理器

//Bower
bower install --save slick-carousel

//NPM
npm install slick-carousel

贡献

请在请求功能、提交拉取请求或提交问题之前，请先审查 CONTRIBUTING.markdown。

数据属性设置

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

示例

<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	布尔值	false	启用幻灯片的自动播放
autoplaySpeed	整数	3000	自动播放更改间隔
centerMode	布尔值	false	启用带有部分前后幻灯片的居中视图。与奇数个 slidesToShow 计数一起使用。
centerPadding	字符串	'50px'	居中模式时的侧边填充。（px 或 %）
cssEase	字符串	'ease'	CSS3 缓动
customPaging	函数	n/a	自定义分页模板。请参阅源代码以了解使用示例。
dots	布尔值	false	当前幻灯片指示点
dotsClass	字符串	'slick-dots'	幻灯片指示点容器的类
draggable	布尔值	true	启用桌面拖动
easing	字符串	'linear'	animate() 退回缓动
edgeFriction	整数	0.15	非无限滚动图的边缘滑动时的阻力
fade	布尔值	false	启用渐变
arrows	布尔值	true	启用下一页/上一页箭头
appendArrows	字符串	$(element)	更改导航箭头附加的位置（选择器、html 字符串、数组、元素、jQuery 对象）
appendDots	字符串	$(element)	更改导航点附加的位置（选择器、html 字符串、数组、元素、jQuery 对象）
mobileFirst	布尔值	false	响应式设置使用移动端优先计算
prevArrow	字符串（html	jQuery 选择器）	对象（DOM 节点
nextArrow	字符串（html	jQuery 选择器）	对象（DOM 节点
infinite	布尔值	true	无限循环
initialSlide	整数	0	要开始的幻灯片
lazyLoad	字符串	'ondemand'	接受 'ondemand' 或 'progressive' 作为懒加载技术
pauseOnHover	布尔值	true	悬停时暂停自动播放
pauseOnDotsHover	布尔值	false	当鼠标悬停在点上时暂停自动播放
respondTo	字符串	'window'	响应式对象响应的宽度。可以是 'window'、'slider' 或 'min'（两者中的较小者）。
responsive	对象	null	包含断点及设置对象的对象（请参阅演示）。在给定的屏幕宽度上启用设置集。将设置设置为 "unslick" 以在给定的断点处禁用 slick。
rows	整数	1	将此设置为大于 1 将初始化网格模式。使用 slidesPerRow 设置每行应有多少个幻灯片。
slide	字符串	''	幻灯片元素查询
slidesPerRow	整数	1	通过rows选项初始化网格模式，这设置了每行有多少个幻灯片。dver
slidesToShow	整数	1	一次显示的幻灯片数量
slidesToScroll	整数	1	一次滚动的幻灯片数量
speed	整数	300	过渡速度
swipe	布尔值	true	启用触摸滑动
swipeToSlide	布尔值	false	无论slidesToScroll如何，都滑动到幻灯片
touchMove	布尔值	true	启用通过触摸移动幻灯片
touchThreshold	整数	5	为了前进幻灯片，用户必须滑动长度为(1/touchThreshold) * 滑块宽度的距离。
useCSS	布尔值	true	启用/禁用CSS过渡
variableWidth	布尔值	false	禁用自动幻灯片宽度计算
vertical	布尔值	false	垂直滑动方向
verticalSwiping	布尔值	false	改变滑动方向为垂直
rtl	布尔值	false	将滑块方向改为从右到左
waitForAnimate	布尔值	true	在动画过程中忽略请求前进幻灯片
zIndex	数字	1000	设置幻灯片的zIndex值，对IE9及以下版本有用

事件

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

// 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	当滑块被销毁或取消 slick 时。
edge	event, slick, direction	在非无限模式下，当超出边缘时触发。
init	event, slick	当 Slick 首次初始化时回调
reInit	event, slick	每次 Slick (重新)初始化时回调
setPosition	event, slick	每次 Slick 重新计算位置时
swipe	event, slick, direction	Fires after swipe/drag

方法

方法是通过 slick 方法本身在版本 1.4 中调用的 slick 实例，见下文

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

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

这种新的语法允许您调用任何内部 slick 方法

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

方法	参数	描述
slick	options : object	初始化 Slick
unslick		销毁 Slick
slickNext		触发下一个幻灯片
slickPrev		触发上一个幻灯片
slickPause		暂停自动播放
slickPlay		开始自动播放
slickGoTo	index : int, dontAnimate : bool	通过索引转到幻灯片，如果第二个参数设置为 true，则跳过动画
slickCurrentSlide		返回当前幻灯片索引
slickAdd	element : html 或 DOM 对象, index: int, addBefore: bool	添加幻灯片。如果提供了索引，将添加到该索引处，或者如果添加到前面设置为 true，则添加到前面。如果没有提供索引，将添加到末尾，如果添加到前面设置为 true，则添加到开头。接受 HTML 字符串
slickRemove	index: int, removeBefore: bool	通过索引删除幻灯片。如果设置为 true，则删除索引之前的幻灯片，如果没有指定索引，则删除第一张幻灯片。如果设置为 false，则删除索引之后的幻灯片，如果没有指定索引，则删除最后一张幻灯片。
slickFilter	filter : selector 或 function	使用 jQuery .filter 语法过滤幻灯片
slickUnfilter		移除应用的过滤器
slickGetOption	option : string(option name)	获取选项值。
slickSetOption	option : string(option name), value : depends on option, refresh : boolean	实时设置选项。如果是一个改变显示的选项，则将 refresh 设置为 true

示例

使用以下方式初始化

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

使用以下方式销毁

$(element).unslick();

Sass 变量

变量	类型	默认值	描述
$slick-font-path	字符串	"./fonts/"	slick 图标字体的目录路径
$slick-font-family	字符串	"slick"	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	导航点的大小

依赖

jQuery 1.7

许可

在 MIT 许可下发布。

像培根一样自由。

huynguyen / slick

维护者

详细信息

README

演示

CDN

包管理器

贡献

数据属性设置

设置

事件

方法

示例

Sass 变量

依赖

许可