上个月写◣到一些基□□本属性操□□作，这个月我□□主要从轮□□□播图出发。在兼容ie9上，我写到一•篇swiper3兼容ie9的文章，但是发现□□□改版的swiper3不是想象□□那么好。又通过网☆络搜索，转为使用slick.js。
一,slick.js使用方法：
引用文件：<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
编写html代码：<div class="slick">
    <div><a href="https://www.nzweibaum.com/"><img src="images/1.jpg" alt=""></a></div>
    <div><a href="https://www.nzweibaum.com/"><img src="images/2.jpg" alt=""></a></div>
    <div><a href="https://www.nzweibaum.com/"><img src="images/3.jpg" alt=""></a></div>
    <div><a href="https://www.nzweibaum.com/"><img src="images/4.jpg" alt=""></a></div>
    <div><a href="https://www.nzweibaum.com/"><img src="images/5.jpg" alt=""></a></div>
</div>
 
编写js代码：$(function(){
    $('.slick').slick({
        dots: true, //分页器
arrow:true,//左右箭头
      pauseHove: false, //鼠标悬停是否停止不动
      infinite: true,  //是否循环
      slidesToShow:3,  //一行几列
    });
});

二，案例：
案例1：首页轮播大图：

html代码： 
 <div class="banner1" id="indexbanner1">
  <a href="https://www.nzweibaum.com/"><img src="images/1.jpg" width="100%"/> </a>
<a href="https://www.nzweibaum.com/"><img src="images/1.jpg" width="100%"/> </a>
<a href="https://www.nzweibaum.com/"><img src="images/1.jpg"  width="100%"/> </a>     
</div>
基本js代码：  $('.banner1').slick({
        swipe: true,
        arrows: false,
        dots: true,
        fade: true,
        cssEase: 'linear',
        speed: 500,
        autoplaySpeed: 2500,
        autoplay: true,
        pauseHove: false,
        infinite: true
});

案例2:3行轮播产□□□品图：


html代码：
<ul id="about4">
    <li class="each-item">
        <a href="https://www.nzweibaum.com/" class="picture" >
                <img src="images/01.jpg" width="340" height="440"/>
            <div class="lans">国家级高□□新企业</div>
        </a>
    </li>
    <li class="each-item">
        <a href="https://www.nzweibaum.com/" class="picture" >

                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001质量认证</div>
        </a>
    </li>
    <li class="each-item">
        <a href="https://www.nzweibaum.com/" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001质量认证</div>
        </a>
    </li>
    <li class="each-item">
        <a href="https://www.nzweibaum.com/" class="picture" >
                <img src="images/01.jpg" width="340" height="440"/>
            <div class="lans">国家级高□□□新企业</div>
        </a>
    </li>
    <li class="each-item">
        <a href="https://www.nzweibaum.com/" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001质量认证</div>
        </a>
    </li>
    <li class="each-item">
        <a href="https://www.nzweibaum.com/" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001质量认证</div>
        </a>
    </li>
</ul>Js代码：
$(function () {     $('#about4').slick({         pauseHove: false,         infinite: true,         slidesToShow:3,         arrow: true     }); })

二，与swiper相比的优◇缺点：优点：
排序简单，便于操作□□□与上手；
与swiper相比，Js和css包轻便，占据内存✦较少；
兼容性良□□好，兼容到ie7及以上；
容易制作□□□□动画效果，比swiper少引入一□□□□个css文件包。 
 
缺点：
太过于复□□杂的效果，不易制作；
效果动画，需要自己□□手写较多，不太适合□□懒癌患者；
在某些环□□境下，swiper会比其好□□□□一些。如3D效果（slick.js不支持） 
 
使用slick.js应注意的□□□点：
css和js包应该加□□□载正确；
Css代码上需□□□□要写上：
    .slick-slide:focus, .slick-slide a:focus {outline: none;} 
原因：slick插件里进□□行拖拽时，会出现默•认的蓝色•边框.如图：


附上，一些上文□□□未讲过的slick.js基本属性：
1.accessibility为 true时，可以通过□□□键盘的tab键和方向❖键进行操□□□作
2.adaptiveHeight为true时，每个滑块□□□□的高度与□□□内容的高□□度相一致
3.autoplay为true时，可以使选□□项卡自动★滑动
4.cssEase为'ease'时，采用css3的ease属性，即滑动的❖时候滑块□□□□的速度逐□□□渐变慢
5.edgeFriction为0时，滑动到最▽后一张图□□片时，图片不能▲再滑动。
6.infinite为false时，不能无限□□□□循环。
7.initialSlide为1时，就从第1张滑块开□□□□始滑动。