简单总结swiper框架的使用

简介

• swiper是一个免费的轻量级的，主要处理移动设备 触控滑块 的js框架，主要是为iOS设计的，但是在安卓，wp和pc端也有良好的用户体验。

特点

• 1、轻量级，简洁高效；
• 2、横跨多种设备iOS、安卓、wp、pc；
• 3、多种版本支持（原生，jQuery，zepto）。

注意

• swiper现在已经发展到3.x系列，最新的版本已经不再全面支持PC端的浏览器，如果要更好地兼容性，需要使用2.x版本（IE7+）。

使用

• 1、引入文件

• 2、HTML结构

    

        
Slide 1
        
Slide 2
        
Slide 3
    

• 3、Js文件调用

var swiper = new Swiper('.swiper-container');

注意：html的结构不能随意进行修改，标签的类名也不能修改，如果要修改，那么需要单独添加类名进行控制！！！

高级使用方式

HTML:

    

        
Slide 1
        
Slide 2
        
Slide 3
    
    
    

    
    

    

    
    

** 对应的js参数 **

var mySwiper = new Swiper('.swiper-container',{
    // 如果需要分页器
      pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    // 如果需要滚动条
      scrollbar: '.swiper-scrollbar'
});

注意：需要什么参数就添加对应的HTML和配置文件中的“开关”属性。

常用功能参数

• loop: true, // 循环开关
• autoplay: 3000, // 自动播放间隔时间（单位：毫秒）默认不自动播放
• direction: 'vertical', // 切换放向 水平（horizontal）或垂直（vertical）
• speed: 300, // 切换速度（单位：毫秒）
• keyboardControl: true, // 键盘控制开关
• paginationType: 'bullets', // 分页器外观 bullets、fraction、progress
• effect: 'fade', // 切换效果 fade、cube、coverflow、flip
• ......

官网

http://www.swiper.com.cn/

参数文档

http://www.swiper.com.cn/api/index.html

【swiper animate】△△△

• 简介：swiper animate是swiper中文网提供的用于在swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x和Swiper3.x。
• 1、引入文件(比之前多了animate.css 和swiper.animate.js)

• 2、HTML

 

   

     

        
Slider 1
     
   
 

注意：在需要运动的元素上面增加类名 ani, 然后添加swiper animate 参数。

标签属性:

Swiper-animate-effect      动画效果
swiper-animate-duration  动画持续时间（一定要带单位）
swiper-animate-delay      动画延迟时间（一定要带单位）

• 3、js调用：

var mySwiper = new Swiper ('.swiper-container', {
      onInit: function(swiper){               //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper);  //隐藏动画元素
        swiperAnimate(swiper);            //初始化完成开始动画
      },
      onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper);           //每个slide切换结束时也运行当前slide动画
      }
 })