关于使用swiper心得

   Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需 在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

  目前本人运用它做了一个小网站，感觉还不错。在里面主要用到了一些比较常用的方法，下面给大家分享一下：

首先在 Swiper官网 上下载swip文档到本地，然后对应的加下面的代码（对应好文件路径）:

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

初始化swiper：

<script> 
/*pagination: '.swiper-pagination',*/  // 分页的css类
             direction: 'vertical',              //滑动方向为垂直
             slidesPerView: 1,                     //可见的swiper个数
        //followFinger : false,             //松开鼠标或者手才能滑动
             paginationClickable: true,                
             spaceBetween: 0,                      //每个swiper之间的距离
             mousewheelControl: true,      //是否可以使用滚轮
             speed: 900,                           //切换速度
             //grabCursor:true,                    //鼠标是否变为手的形状
             keyboardControl : true,            //是否允许键盘操作
             mousewheelReleaseOnEdges : true,
             //loop : true,              //是否循环
             scrollbar:'.swiper-scrollbar2',//是否需要滚动条
             scrollbarHide:false,           //是否自动隐藏滚动条
             //prevButton:'#span_pre',  //设置下一页按钮
             nextButton:'.span',                     //设置下一页按钮css类
         threshold : 100,               //设置拖动距离100px才切换slide
             /* onReachEnd: function(swiper){
                alert("滑动结束");
                } */
             onSlideChangeStart: function(swiper){
                  if(swiper.activeIndex==1){alert("当前的swiper索引为1")}
}
                if(swiper.isEnd){
                     alert("滑动结束");
                 }
                 else if(swiper.isBeginning){          
alert("开始滑动");
                 }
}
</script>

设定点击不同的事件产生滑动：

$('#project').click(function(){
                 swiper.slideTo(4, 1000, false);
}

嵌套swiper：

<div class="swiper-slide" id="div_slider2">
                    <div class="swiper-container swiper-container-h">
                        <div class="swiper-wrapper">
                        </div>
                        <div class="swiper-slide swiper-slideh" id="div_leader">
                        </div>
                        <div class="swiper-slide swiper-slideh" id="div_video" style="background:#80CAA7;opacity:0.8;">
                        </div>
                        <div class="swiper-slide swiper-slideh" id="div_cooperation">
                        </div>
                        <div class="swiper-slide swiper-slideh" id="div_organ">
                        </div>
                         <div class="swiper-slide swiper-slideh" id="div_history" style="background:#DAE3D2">                           
                </div>
             </div>
            </div>

同样也需要初始化swiper，只是对应不同的类名即可。

如果有导航，滚动每一个swiper对应的导航名称css改变时，需要在swiper滑动开始事件里面把对应的导航css加上，其他的变成相同的css。


posted @ 2015-09-28 14:46  纸鸢&红豆·绿豆  阅读(316)  评论(0)  编辑  收藏  举报