1、基本结构
<div class="swiper-container">
<div class="swiper-wrapper"> //slider元素必须由该元素包裹，类名不能改
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
//js初始化
var swiper = new Swiper('.swiper-container');
2、常用功能
2.1 开启分页
<div class="swiper-container">
<div class="swiper-wrapper"> //slider元素必须由该元素包裹，类名不能改
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
<div class="swiper-pagination"></div> //类名与下面初始化js一致
</div>
//js初始化
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true //分页按钮可点击来切换
});
2.2 开启垂直方向slider
默认水平方向。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical' //添加direction参数即可
});
2.3 开启slider之间留空隙
默认没有空隙。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30 //添加spaceBetween参数即可,单位为像素，注意并不影响slider宽度，本质是在slider之间加margin
});
2.4 开启首页显示多个slider（第一个slider不居中）
默认首页只显示一个slider
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView:3, //添加slidesPerView参数即可,可为小数，如2.5
spaceBetween: 30
});
2.5 开启首页显示多个slider（第一个slider居中）
默认首页只显示一个slider
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView:3,
spaceBetween: 30，
centeredSlides: true, //添加centeredSlides参数即可
});
2.6 开启随意滑动
默认最快一次只能划1-3个slider，开启后可以滑动到任意一个。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true //添加freeMode参数即可
});
2.7 开启滚动条和上一页/下一页
默认不显示滚动条
<div class="swiper-container">
<div class="swiper-wrapper"> //slider元素必须由该元素包裹，类名不能改
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
<div class="swiper-scrollbar"></div> //类名与下面初始化js一致
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
//js初始化
var swiper = new Swiper('.swiper-container', {
scrollbar: '.swiper-scrollbar', //替换分页的一种形式
scrollbarHide: true, //不活动时自动隐藏scrollbar
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
grabCursor: true
});
2.8 开启无限滚动和键盘(鼠标滑轮)控制滚动
默认到最后一个slider时不能继续往同一个方向滚动。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
loop: true， //添加loop参数即可，可同方向从最后一个滑向第一个
keyboardControl: true //添加keyboardControl参数即可用键盘控制
mousewheelControl: true //添加mousewheelControl参数即可用滑轮控制
});
2.9 开启图片淡入淡出功能
默认无淡入淡出。slider内容最好是图片，不要是文字，会被覆盖
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
effect: 'fade' // 添加effect参数即可,其他效果见官网
});
2.10 开启自动切换
默认不自动切换。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
autoplay: 2500, //切换间隔，毫秒为单位
autoplayDisableOnInteraction: false //打断自动切换后是否停止自动切换
});
2.11 开启用hash值切换slider
默认不能用hash切换。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
hashnav: true, //添加hashnav和hashnavWatchState参数即可
hashnavWatchState: true
});
2.12 自定制分页按钮
默认是点点。
//第一步，写定制的样式
.swiper-pagination-bullet { //未激活样式
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active { //激活样式
color:#fff;
background: #007aff;
}
// 第二步，调用如下函数paginationBulletRender：
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
2.13 根据屏幕宽度设置每屏显示几个slider
默认显示一个。
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView: 5,
spaceBetween: 50,
breakpoints: { //设置breakpoints参数，很强大
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});
2.14 图片懒加载
默认一次加载所有图片。
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- 真正图片url放在data-src属性 -->
<!-- 图片未加载完成时加载的图片或加载进度提示，如是图片通常较小 -->
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Navigation -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
//js
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
preloadImages: false, //是否预加载所有图片
lazyLoading: true //开启懒加载
});
2.15 其他
还有如：开启分数形式分页按钮；滚动条式分页按钮；effect的多种取值；每个slider高度不一致；图片懒加载；history形式切换slider等效果，以上列举了常用的功能。
更多功能，请看官网
3 常用的API
- onSlideChangeStart(swiper)
swiper从当前slide开始过渡到另一个slide时执行。可接受swiper实例作为参数，输出的activeIndex是过渡后的slide索引。
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
alert(swiper.activeIndex);
}
})
- slideTo(index)
切换到指定index的slide
var mySwiper = new Swiper('.swiper-container',{
})
mySwiper.slideTo(index)
几个类名不可变：swiper-slide swiper-wrapper，其它类名修改了在实例化时要对应，最好不要改
