Keep on coding

HTML5 - Swiper框架

发表于 | 分类于 | | 阅读次数

框架五 —-> swiper.js

介绍

  • Swiper是一款免费以及轻量级的移动设备触控滑块的js框架，主要是为iOS设计，同时，在Android、WP系统和其他PC浏览器上也有着良好的体验。

特点

  • 轻量级，简洁高效，可定制性非常高；
  • 横跨各种设备，兼容IOS、Android、WP、PC端设备；
  • 提供多种版本支持（可自由选择jQuery/zepto版或原生js）;

注意:

Swiper从3.0开始不再全面支持PC端。因此，如需要在PC上兼容更多浏览器，可以选择swiper 2.x(支持IE7)

使用方法

  • 引入方法
1
2
<link rel="stylesheet" href=“css/swiper.min.css">
<script src=“js/swiper.min.js"></script>
  • HTML结构
1
2
3
4
5
6
7
<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>
  • Js文件调用
1
var swiper = new Swiper('.swiper-container');
  • 高级效果和参数设置
    HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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部分 

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

其他参数 根据自己项目的需求可以手动设置 

1
2
3
4
5
6
7
loop: true, //循环开关
autoplay: 3000, //⾃动播放间隔时间（单位：毫秒）默认不⾃动播放
direction: 'vertical', //切换⽅向 ⽔平(horizontal)或垂直(vertical)
speed:300, //切换速度（单位：毫秒）
keyboardControl:true, //键盘控制开关
paginationType:‘bullets’, //分⻚器外观 bullets 、 fraction 、 progress
effect: 'fade', //切换效果 fade、cube、coverflow、flip

swiper animate

  • 引入文件(比之前多了animate.css 和swiper.animate.js)
1
2
3
4
<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>
  • HTML
  • 在需要运动的元素上面增加类名 ani, 然后添加swiper animate 参数
  • swiper-animate-effect：切换效果，例如 fadeInUp
  • swiper-animate-duration：动画持续时间（单位秒），例如 0.5s
  • swiper-animate-delay: 延迟时间（单位秒）
1
2
3
4
5
6
7
<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>
  • js调用
1
2
3
4
5
6
7
8
9
var mySwiper = new Swiper ('.swiper-container', {
         onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
         swiperAnimateCache(swiper); //隐藏动画元素
         swiperAnimate(swiper); //初始化完成开始动画
         },
         onSlideChangeEnd: function(swiper){
             swiperAnimate(swiper); //每个slide切换结束时也运⾏当前slide动画
         }
});

附一个Demo 帮助更好的理解和使用 !

< ! ———- HTML ———– >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="swiper-container box">
    <div class="swiper-wrapper slider">
        <div class="swiper-slide"><img src="images/01.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/02.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/10.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/13.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/14.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/16.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/19.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/35.jpg" alt=""></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>

< ! ——— Style ————— >

1
2
3
4
5
6
7
8
9
10
11
<style>
    .box {
        width: 300px;
        height: 433px;
        margin: 100px auto;
    }
    .slider img{
        width: 300px;
        height: 433px;
    }
</style>

< ! ——— JavaScript ——- >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    var swiper = new Swiper('.swiper-container', {
        // 如果需要分页器器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
        loop: true,
        autoplay: 1000,
        direction: 'horizontal', //切换方向 水平(horizontal)或垂直(vertical)
        speed: 400,
        keyboardControl: true,
        paginationType: "fraction",
        effect: 'flip',
    });
</script>

< ! ——— 效果展示 ———- >

zepto1.gif