【插件推荐】不错的触屏滑动插件-Swiper

今天公司要做一个移动端官网，由于上面有滚动焦点图。考虑到触屏和电脑操作的区别，一般电脑端的焦点图插件不一定能很好的兼容移动端的触屏滑动效果，就算兼容设置起来也比较麻烦。所以我想起来原来同事做移动端时候用到的一款插件-Swiper。

插件官网： http://www.idangero.us/sliders/swiper/

Github：https://github.com/nolimits4web/Swiper

插件的使用没什么特别

 

头部调用插件js以及css：

 

<head>
  ....
  <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
  <script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

 

HTML结构：

 

<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- Any HTML content of the first slide goes here -->
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the second slide goes here -->
      </div>
      
      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- Any HTML content of the third slide goes here -->
      </div>
      <!--Etc..-->
  </div>
</div>

 

css设置div宽高：

 

...
/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

 

js调用，分别演示了原生js和jQuery两种调用方式：

 

<script type="text/javascript">
/*======
Use document ready or window load events
For example:
With jQuery: $(function() { ...code here... })
Or window.onload = function() { ...code here ...}
Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
=======*/

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}

/*
Or with jQuery/Zepto
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

</script>

 

这就是基本的插件调用方式了，更多的插件参数和提供的拓展接口可以去官网自行查找：http://www.idangero.us/sliders/swiper/api.php

其中要说明的就是前面提到了要设置div.swiper-container的宽高，在移动端的时候要注意一点就是因为移动端尤其是安卓端的碎片化，导致分辨率太多，所以我们要将轮播图的div设置成响应式，所以div.swiper-container的宽高要设置成随移动端分辨率获取的等比例宽高，其中最好要设置window.resize()事件，因为要考虑到移动端可能会在横屏和竖屏之间切换。

posted @ 2014-07-03 22:59  Dangolol  阅读(1425)  评论(1)  编辑  收藏  举报