特征
- 充分响应。随其容器缩放
- 每个断点分别设置
- 可用时使用CSS3。如果没有，则功能齐全
- 滑动已启用。或禁用，如果您愿意
- 桌面鼠标拖动
- 无限循环
- 完全可用箭头键导航
- 支持动态添加、删除、过滤
- 支持自动播放、圆点、箭头、回调等等
单项
$('.single-item').slick();
多个项目
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
响应显示
$('.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
]
});
可变宽度
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
适应高度
$('.one-time').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
数据属性设置
在slick 1.5中，您现在可以使用data-slick属性添加设置。您仍然需要调用$（element）.slick（）来初始化元素上的滑动。
1
2
3
4
5
6
<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>
中心模式
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
延迟加载
// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src
<img data-lazy="img/lazyfonz1.png"/>
$('.lazy').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1
});
自动播放
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
褪色
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
添加和删除
$('.add-remove').slick({
slidesToShow: 3,
slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
slideIndex++;
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});
$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});
筛选
$('.filtering').slick({
slidesToShow: 4,
slidesToScroll: 4
});
var filtered = false;
$('.js-filter').on('click', function(){
if (filtered === false) {
$('.filtering').slick('slickFilter',':even');
$(this).text('Unfilter Slides');
filtered = true;
} else {
$('.filtering').slick('slickUnfilter');
$(this).text('Filter Slides');
filtered = false;
}
});
禁用
如果你真的想成为那个家伙...
$('.your-slider').slick('unslick');
滑块同步
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
右到左
$('.single-item-rtl').slick({
rtl: true
});
注意: HTML标记或滑块的父级必须将属性“ dir”设置为“ rtl”。