编程爱好者之家

swiper简单用法

2018-07-24 74

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

image.png

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

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的位移。
}

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

同类文章

您的赞赏是对小编最大的支持!