swiper.min.js插件

swiper.min.js插件实现多种滑动效果，可在pc、手机、平板中使用。

该插件官方网址：http://www.swiper.com.cn/（版本3）、http://2.swiper.com.cn/（版本2.X）里面可以下载该插件，而且有相应的实例。

例外最近发现还有swiper相关的交流网址:http://bbs.swiper.com.cn/forum.php 。

例1：简单的轮播图效果：

引用：

 
 

css:

  * {margin: 0;padding: 0;}
  .swiper-slide{text-align:center; height:300px;line-height:300px;}
  .red-slide{background:red;}
  .orange-slide{background:orange;}
  .blue-slide{background:blue;}
  .green-slide{background:green;}

html:

 

   

slider1

   

slider2

   

slider3

   

slider4

 

   
 

   
 

 

js:

   var mySwiper = new Swiper('.swiper-container',{
     //切换效果
      effect: 'fade',//'flip','coverflow','cube','fade',  默认横向滑动
      loop:true,  //是否循环
      autoplay: 3000,
      // 如果需要分页器
      pagination: '.swiper-pagination',
      paginationClickable :true,
      // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
  });

例2：成组轮播

引用：

 
 

css:

    .swiper-container {
      margin-top:100px;
        width: 1200px;
        height: 100px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        border:1px solid #ccc;
        height:98px;
        width:118px !important;
    }
    .swiper-button-next,.swiper-button-prev{
    border:1px solid #ccc;
    }
    .w{position:relative;}

html:

 

   

     

       

Slide 1

       

Slide 2

       

Slide 3

       

Slide 4

       

Slide 5

       

Slide 6

       

Slide 7

       

Slide 8

       

Slide 9

       

Slide 10

       

Slide 11

       

Slide 12

       

Slide 13

       

Slide 14

       

Slide 15

       

Slide 16

     

     

     

   

 

js:

    var swiper = new Swiper('.swiper-container', {
        slidesPerView:10,  //默认页面显示多少个
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    });

例3：含有缩略图的轮播效果

引用：

 
 

css:

    .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        height: 80%;
        width: 100%;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

html:

 

   

       

           

           

           

           

           

       

       
       

       

   

   

       

           

           

           

           

           

       

   

 

js:

    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;

在官网中有很多例子，api文档中也介绍了相关参数的使用方法。

注：

1）如果页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

2）初始化Swiper：最好是挨着标签；如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。window.onload = function() {} 或者$(document).ready(function () {})。

3）swiper插件版本3.X和2.X之间的还是有一定差距的，在ie9中版本3.X有些效果是无效的，如果考虑pc端的兼容性问题的话，还是使用2.X比较好。

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

4）在项目中发现该插件不能很好地兼容Vue.js，在Vue.js中该swiper插件样式全乱了，具体的解决办法现在还没找到，如果有人有解决的方法，请告诉一下，谢谢啦。