简单总结swiper框架的使用

简介

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

特点

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

注意

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

使用

• 1、引入文件

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>

• 2、HTML结构

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

• 3、Js文件调用

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

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

高级使用方式

HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

** 对应的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)

<link rel="stylesheet" href=“css/swiper.min.css">
 <link rel="stylesheet" href=“css/animate.min.css">    
 <script src=“js/swiper.min.js"></script>
 <script src=“js/swiper.animate.min.js"></script>

• 2、HTML

 <div class="swiper-container">
   <div class="swiper-wrapper">
     <div class="swiper-slide">
        <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slider 1</p>
     </div>
   </div>
 </div>

注意：在需要运动的元素上面增加类名 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动画
      }
 })