1. 在使用的时候要引入的有 swiper.min.js和swiper.min.css
2. 最简单的swiper结构:
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider 1</div>
<div class="swiper-slide">slider 2</div>
<div class="swiper-slide">slider 2</div>
</div>
</div>
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之后立即停止不会滑动。详细说明