16、jQuery插件之Slick幻灯片插件

╰+哭是因爲堅強的太久メ 2022-06-09 01:26 1094阅读 0赞

简介  
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：  
支持响应式  
浏览器支持 CSS3 时，则使用 CSS3 过度/动画  
支持移动设备滑动  
支持桌面浏览器鼠标拖动  
支持循环  
支持左右控制  
支持动态添加、删除、过滤  
支持自动播放、圆点、箭头、回调等等  
兼容

浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

## 参数 ##

<table style="margin:0px; padding:0px; border-spacing:0px; border-collapse:collapse; width:819px; color:rgb(102,102,102); font-family:Consolas,&quot;Microsoft Yahei&quot;,Arial,宋体; font-size:14px"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">参数</th> 
   <th style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">类型</th> 
   <th style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">默认值</th> 
   <th style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">说明</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">accessibility</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">启用Tab键和箭头键导航</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">autoplay</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">false</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">自动播放</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">autoplaySpeed</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">整数</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">3000</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">自动播放间隔</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">centerMode</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">false</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">中心模式</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">centerPadding</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">字符串</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">’50px’</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">中心模式左右内边距</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">cssEase</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">字符串</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">‘ease’</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">CSS3 动画</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">customPaging</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">function</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">n/a</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">自定义分页</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">dots</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">false</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">指示点</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">draggable</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">启用桌面拖动</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">easing</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">字符串</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">‘linear’</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">animate() fallback easing</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">fade</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">false</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">淡入淡出</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">arrows</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">左右箭头</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">infinite</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">循环播放</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">lazyLoad</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">字符串</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">‘ondemand’</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">延迟加载，可选 ondemand 和 progressive</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">onBeforeChange(this, index)</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">method</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">null</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">开始切换前的回调函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">onAfterChange(this, index)</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">method</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">null</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">切换后的回调函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">onInit(this)</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">method</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">null</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">第一次初始化后的回调函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">onReInit(this)</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">method</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">null</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">再次初始化后的回调函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">pauseOnHover</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">鼠标悬停暂停自动播放</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">responsive</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">object</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">null</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">断点触发设置</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">slide</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">字符串</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">‘div’</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">滑动元素查询</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">slidesToShow</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">整数</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">1</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">幻灯片每屏显示个数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">slidesToScroll</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">整数</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">1</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">幻灯片每次滑动个数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">speed</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">整数</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">300</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">滑动时间</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">swipe</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">移动设备滑动事件</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">touchMove</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">触摸滑动</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">touchThreshold</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">整数</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">5</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">滑动切换阈值，即滑动多少像素后切换</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">useCSS</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">true</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">使用 CSS3 过度</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">vertical</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">布尔值</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">false</td> 
   <td style="margin:0px; padding:10px; border:1px solid rgb(221,221,221)">垂直方向</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

接下来，我们开始写案例：

1、一张幻灯片，手动点击效果

![Center][]

代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>一张幻灯片</h2>
                <div class="slider single-item">
                    <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>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.single-item').slick({
            dots: true,//显示指示点
            infinite: true,//开启循环播放
            speed: 300,//滑动速度300毫秒，单位毫秒
            slidesToShow: 1,//幻灯片每屏显示1个
            slidesToScroll: 1//幻灯片每次滑动1个
        });

2、多张幻灯片  
 ![Center 1][]  
  
代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>多张幻灯片</h2>
                <div class="slider multiple-items">
                    <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><h3>7</h3></div>
                    <div><h3>8</h3></div>
                    <div><h3>9</h3></div>
                </div>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

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

3、响应式显示

PC端显示

![Center 2][]  
手机端显示

![Center 3][]

代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>响应式显示</h2>
                <div class="slider responsive">
                    <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><h3>7</h3></div>
                    <div><h3>8</h3></div>
                </div>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.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
                }
            }]
        });

4、一次一张

![Center 4][]

代码:

$('.one-time').slick({
            dots: true,
            infinite: false,
            placeholders: false,
            speed: 300,
            slidesToShow: 5,
            touchMove: false,
            slidesToScroll: 1
        });

5、参差不齐的设置

![Center 5][]

$('.uneven').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4
        });

6、中心大屏模式

![Center 6][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>中心大屏模式</h2>
                <div class="slider center">
                    <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>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.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
                }
            }]
        });

7、懒惰加载

![Center 7][]

代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>懒惰加载</h2>
                <div class="slider lazy">
                    <div><div class="image"><img data-lazy="img/lazyfonz1.png"/></div></div>
                    <div><div class="image"><img data-lazy="img/lazyfonz2.png"/></div></div>
                    <div><div class="image"><img data-lazy="img/lazyfonz3.png"/></div></div>
                    <div><div class="image"><img data-lazy="img/lazyfonz4.png"/></div></div>
                    <div><div class="image"><img data-lazy="img/lazyfonz5.png"/></div></div>
                    <div><div class="image"><img data-lazy="img/lazyfonz6.png"/></div></div>
                </div>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.lazy').slick({
            lazyLoad: 'ondemand',//延迟加载,可选 ondemand 和 progressive(测了下，没有延迟效果)
            slidesToShow: 3,
            slidesToScroll: 1
        });

8、自动播放  
 ![Center 8][]

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>自动播放</h2>
                <div class="slider autoplay">
                    <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>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.autoplay').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,//开启自动播放
            autoplaySpeed: 2000//自动播放间隔，每2秒播一次
        });

9、淡入淡出  
![Center 9][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>淡入淡出</h2>
                <div class="slider fade">
                    <div><div class="image"><img src="img/fonz1.jpg"/></div></div>
                    <div><div class="image"><img src="img/fonz2.jpg"/></div></div>
                    <div><div class="image"><img src="img/fonz3.jpg"/></div></div>
                </div>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.fade').slick({
            dots: true,
            infinite: true,
            speed: 500,
            fade: true,//开启淡入淡出效果
            slide: 'div',//滑动元素查询
            cssEase: 'linear'//CSS3 动画名字
        });

10、新增和移除幻灯片

![Center 10][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>动态添加和移除幻灯片</h2>
                <div class="slider add-remove">
                    <div><h3>1</h3></div>
                </div>
                <div class="buttons">
                    <a href="javascript:void(0)" class="button js-add-slide">新增幻灯片</a>
                    <a href="javascript:void(0)" class="button js-remove-slide">移除幻灯片</a>
                </div>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.add-remove').slick({
            dots: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
        var slideIndex = 1;
        $('.js-add-slide').on('click', function() {
            slideIndex++;
            $('.add-remove').slickAdd('<div><h3>' + slideIndex + '</h3></div>');
        });
        $('.js-remove-slide').on('click', function() {
            $('.add-remove').slickRemove(slideIndex - 1);
            if (slideIndex !== 0){
                slideIndex--;
            } 
        });

11、过滤效果

![Center 11][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slick插件案例</title>
        <link rel="stylesheet" href="css/monokai.min.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <section id="features" class="blue">
            <div class="content">
                <h2>过滤效果</h2>
                <div class="slider filtering">
                    <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><h3>7</h3></div>
                    <div><h3>8</h3></div>
                    <div><h3>9</h3></div>
                    <div><h3>10</h3></div>
                    <div><h3>11</h3></div>
                    <div><h3>12</h3></div>
                </div>
                <div class="filter">
                        <a href="javascript:void(0)" class="button js-filter">过滤幻灯片</a>
                </div>
            </div>
        </section>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/highlight.min.js"></script>
        <script type="text/javascript" src="slick/slick.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
    </html>

$('.filtering').slick({
            dots: true,
            slidesToShow: 4,
            slidesToScroll: 4
        });
        var filtered = false;
        $('.js-filter').on('click', function() {
            if (filtered === false) {
                $('.filtering').slickFilter(':even');
                $(this).text('没过滤幻灯片');
                filtered = true;
            } else {
                $('.filtering').slickUnfilter();
                $(this).text('过滤幻灯片');
                filtered = false;
            }
        });

下载：[http://git.oschina.net/sensus/slickChaJianAnLi/tree/master][http_git.oschina.net_sensus_slickChaJianAnLi_tree_master]

[Center]: /images/20220609/e17a3c8c866a493898646ce4504423db.png
[Center 1]: /images/20220609/e9355dfdf73f4a86b71dd06a148110d0.png
[Center 2]: /images/20220609/0fff5e7b26f241d1a357b6d67434fe3d.png
[Center 3]: /images/20220609/9a00c124aee94002adc3f62ae5efaf7d.png
[Center 4]: /images/20220609/4388d0f372cc4b7bb97bab73f91cdf57.png
[Center 5]: /images/20220609/36c33ecd34c144bea3c86793b2f7dce1.png
[Center 6]: /images/20220609/6a80dbca918749839131fe8b80d7870b.png
[Center 7]: /images/20220609/7fdda62b010f4e36885ea31754f48d7e.png
[Center 8]: /images/20220609/1af188793e0348308982b7c0bcda8bdb.png
[Center 9]: /images/20220609/81a5ccaa3a9a4cbd8583d9aadb188c17.png
[Center 10]: /images/20220609/3f12a885482849ce97bd8240b0f31888.png
[Center 11]: /images/20220609/2eadab62d1ed44a39ebc613fd0426fb9.png
[http_git.oschina.net_sensus_slickChaJianAnLi_tree_master]: http://git.oschina.net/sensus/slickChaJianAnLi/tree/master