Swiper使用

1. 在使用的时候要引入的有 swiper.min.js和swiper.min.css

2. 最简单的swiper结构：

HTML:

   

         

slider 1

         

slider 2

         

slider 2

     

CSS

.swiper-slide{

         width: 100%;

          height: 300px;

          background-color: red;

          font-size: 60px;

          text-align: center;

           line-height: 300px;

           font-weight: bold;

}

JS

var mySwiper = new Swiper(".swiper-container");

常用的一些属性：

* autopaly：自动切换时间间隔（单位ms）

* autoplayDisableOnInteraction: 用户操作swiper之后，是否禁止autoplay，默认是true ，禁止

* pagination 分页器 使用方法示例 demo

* paginationType bullets 圆点（默认） fraction 分式  paogress   进度条    custom 自定义

* paginationClickable 此参数设置为true时，点击分页器的知识点分页器会控制Swiper切换，默认（false）

* nextButton 前进按钮的css选择器或者HTML元素 使用示例demo

* prevButton 使用方法同上。

* preloadImages 默认为true ，Swpier会强制加载所有的图片

* lazyLoading 设为true开启图片延迟加载，使preloadImages无效。需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。背景图的延迟加载则增加属性data-background（3.0.7开始启用）。具体使用方法

* loop 设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide并在合适的时候切换，让Swiper看起来是循环的。

* freeMode 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

* freeModeMomentum free模式动量。free模式下，若设置为false则关闭动量，释放slide之后立即停止不会滑动。详细说明