如何使用

引入资源文件

<link rel="stylesheet" href="slick.css" />
<script type="text/javascript" src="slick.min.js" ></script>

资源文件下载：点击下载

html 结构

<div class="big_img">
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
</div>

<div class="sml_img">
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
    <div class="item">
        <img src="">
    </div>
</div>

js代码

$('.big_img').slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			fade: true,
			pullDrag:false,
			freeDrag:false,
			touchDrag:false,
			mouseDrag: false,
			asNavFor: '.sml_img'
		});
		$('.sml_img').slick({
			slidesToShow: 4,
			slidesToScroll: 1,
			asNavFor: '.big_img',
			dots: false,
			centerPadding: '0',
			centerMode: true,
			responsive: [
				{
                        breakpoint: 1400,
                        settings: {
                            slidesToShow: 11,
                        }
                    },
                    {
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 9,
                        }
                    },
                    {
                        breakpoint: 992,
                        settings: {
                            slidesToShow: 7,
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 5,
                        }
                    },
                    {
                        breakpoint: 300,
                        settings: {
                            slidesToShow: 5,
                        }
                    }
			],
			focusOnSelect: true
		});

参数

accessibility	布尔值	true	启用Tab键和箭头键导航
autoplay	布尔值	false	自动播放
autoplaySpeed	整数	3000	自动播放间隔
centerMode	布尔值	false	中心模式
centerPadding	字符串	’50px’	中心模式左右内边距
cssEase	字符串	‘ease’	CSS3 动画
customPaging	function	n/a	自定义分页
dots	布尔值	false	指示点
draggable	布尔值	true	启用桌面拖动
easing	字符串	‘linear’	animate() fallback easing
fade	布尔值	false	淡入淡出
arrows	布尔值	true	左右箭头
infinite	布尔值	true	循环播放
lazyLoad	字符串	‘ondemand’	延迟加载，可选 ondemand 和 progressive
onBeforeChange(this, index)	method	null	开始切换前的回调函数
onAfterChange(this, index)	method	null	切换后的回调函数
onInit(this)	method	null	第一次初始化后的回调函数
onReInit(this)	method	null	再次初始化后的回调函数
pauseOnHover	布尔值	true	鼠标悬停暂停自动播放
responsive	object	null	断点触发设置
slide	字符串	‘div’	滑动元素查询
slidesToShow	整数	1	幻灯片每屏显示个数
slidesToScroll	整数	1	幻灯片每次滑动个数
speed	整数	300	滑动时间
swipe	布尔值	true	移动设备滑动事件
touchMove	布尔值	true	触摸滑动
touchThreshold	整数	5	滑动切换阈值，即滑动多少像素后切换
useCSS	布尔值	true	使用 CSS3 过度
vertical	布尔值	false	垂直方向
verticalSwiping	布尔值	false	是否开启垂直滑动切换

方法

slick()	options : object	初始化 slick
unslick()		销毁 slick
slickNext()		切换下一张
slickPrev()		切换上一张
slickPause()		暂停自动播放
slickPlay()		开始自动播放
slickGoTo()	index : int	切换到第 x 张
slickCurrentSlide()		返回当前幻灯片索引
slickAdd()	element : html or DOM object, index: int, addBefore: bool	Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove()	index: int, removeBefore: bool	Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter()	filter : selector or function	Filters slides using jQuery .filter syntax
slickUnfilter()		Removes applied filter
slickSetOption(option,value,refresh)	option : string(option name), value : depends on option, refresh : 布尔值	Sets an option live. Set refresh to true if it is an option that changes the display

回调

// 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);
});


方法
通过1.4版中的slick方法本身在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');
销毁结构
$(".ind_box1_r_scroll").slick('unslick');

Event	Params	Description
afterChange	event, slick, currentSlide	After slide change callback
beforeChange	event, slick, currentSlide, nextSlide	Before slide change callback
breakpoint	event, slick, breakpoint	Fires after a breakpoint is hit
destroy	event, slick	When slider is destroyed, or unslicked.
edge	event, slick, direction	Fires when an edge is overscrolled in non-infinite mode.
init	event, slick	When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
reInit	event, slick	Every time Slick (re-)initializes callback
setPosition	event, slick	Every time Slick recalculates position
swipe	event, slick, direction	Fires after swipe/drag
lazyLoaded	event, slick, image, imageSource	Fires after image loads lazily
lazyLoadError	event, slick, image, imageSource	Fires after image fails to load