swiper简单用法

今天做一个页面需要用到滑动效果，于是用了jq的swiper插件，实现效果如下

手机端左右可以来回滑动页面

HTML页面如下

<div class="Tjlist">
   <div class="swiper-tj">
      <div class="swiper-wrapper">         
         <div class="swiper-slide">
            <a href="http://www.codelovers.cn/article/20180329115537.html">
               <div class="img">
                  <img src="http://www.codelovers.cn/Public/Home/images/404.jpg" >
               </div>
               <p class="name">WiFi管家</p>
            </a>
         </div> 
         div class="swiper-slide">
            <a href="http://www.codelovers.cn/article/20180329115537.html">
               <div class="img">
                  <img src="http://www.codelovers.cn/article/20180227132512.html" >
               </div>
               <p class="name">刺激战场</p>
            </a>
         </div>         
      </div>
   </div>
</div>

首先要引用swiper.css与swiper.js

<link rel="stylesheet" type="text/css" href="/css/swiper.css" />
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>

然后js代码如下

if($('.swiper-tj').size()>=1){
   var swipertj = new Swiper('.swiper-tj', {
      slidesPerView:'auto', //设置slider容器能够同时显示的slides数量
      spaceBetween:20, //slide之间的距离(单位像素)
      freeMode: true  //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合
   });
   $('.swiper-tj .swiper-slide').css('width','70px'); //设置每个模块的宽度
   swipertj.update(); //update(updateTranslate),updateTranslate，默认false，设置为true则重新计算Wrapper的位移。
}

这样就可以了，是不是特别简单呢