slick.js缩略图模式使用方法

发布时间:2018-12-12

1、引入文件

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

2、使用方法

$('.slider').slick({
    arrows: false, 
    slidesToShow: 1,
    slidesToScroll: 1,     
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider',
    centerMode: true,
    focusOnSelect: true
});

其中$('.slider')为轮播大图包围容器,$('.slider-nav')为缩略图包围容器。

项目主页:http://kenwheeler.github.io/slick/

GitHub地址:https://github.com/kenwheeler/slick/

插件地址:http://plugins.jquery.com/slick/