swiper插件的使用总结
swiper是一款功能强大的插件，可以实现很多我们意想不到的轮播效果。
1.在使用swiper之前首先要引入插件自带的样式和行为
<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
<script src="../css/swiper.min-3.js" type="text/javascript" charset="utf-8"></script>2. 引入swiper的布局结构 类的命名不要随意改变 因为该插件重类名不重结构
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../img/c0.jpg"/></div>
<div class="swiper-slide"><img src="../img/c1.jpg"/></div>
<div class="swiper-slide"><img src="../img/c2.jpg"/></div>
<div class="swiper-slide"><img src="../img/c3.jpg"/></div>
<div class="swiper-slide"><img src="../img/c4.jpg"/></div>
<div class="swiper-slide"><img src="../img/c5.jpg"/>/div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>3.最核心的东西在下面 解释的已经相当详细 不再过多赘述
<script>
//初始化 默认自适应
var myswiper = new Swiper('.swiper-container',{
autoplay:2000,//逗号结尾
/*自动切换的时间间隔(单位ms),不写不自动切换
类型:数字 默认是0
*/
initialSlide:0,
/*
设定初始化时的slide索引(默认显示第几张)
类型:数字
索引从0开始
*/
direction:'horizontal',
/*
滑动的方向 可以是水平,垂直
可选值horizontal,vertical
*/
speed:1000,
/*
滑动速度,自动滑动开始到结束的时间(ms)
类型:数字 默认:300
配合autoplay
*/
autoplayDisabledOninteraction:true,
/*
用户操作swiper,是否禁止autoplay
操作:触碰 拖动 点击 (分页)
默认是true 可选的值false
*/
autoplayStopOnLast:true,
/*
切换到最后一个slide停止自动切换
ps:loop时无效
默认:false不停
*/
grabCursor:true,
/*
鼠标指针形状(鼠标覆盖的时候是手,拖动的时候是抓手)
可选值:true false
默认:flase没有抓手
*/
//freeMode:true,
effect:'slider',
pagination:'.swiper-pagination',
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
loop:true,
})
//setInterval("mySwiper.slidePrev()",2000);
</script>4.完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
<script src="../css/swiper.min-3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
padding:0;
margin:0;
}
.swiper-container{
width:480px;
height:270px;
margin:50px auto;
}
.swiper-slide{
line-height:300px;
text-align:center;
font-size:40px;
background:aqua;
}
.swiper-slide:nth-child(2){
background:pink;
}
.swiper-slide:nth-child(3){
background:yellow;
}
.swiper-slide:nth-child(4){
background:lime;
}
.swiper-slide:nth-child(5){
background:silver;
}
.swiper-slide:nth-child(6){
background:purple;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../img/c0.jpg"/></div>
<div class="swiper-slide"><img src="../img/c1.jpg"/></div>
<div class="swiper-slide"><img src="../img/c2.jpg"/></div>
<div class="swiper-slide"><img src="../img/c3.jpg"/></div>
<div class="swiper-slide"><img src="../img/c4.jpg"/></div>
<div class="swiper-slide"><img src="../img/c5.jpg"/>/div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</body>
<script>
//初始化 默认自适应
var myswiper = new Swiper('.swiper-container',{
autoplay:2000,//逗号结尾
/*自动切换的时间间隔(单位ms),不写不自动切换
类型:数字 默认是0
*/
initialSlide:0,
/*
设定初始化时的slide索引(默认显示第几张)
类型:数字
索引从0开始
*/
direction:'horizontal',
/*
滑动的方向 可以是水平,垂直
可选值horizontal,vertical
*/
speed:1000,
/*
滑动速度,自动滑动开始到结束的时间(ms)
类型:数字 默认:300
配合autoplay
*/
autoplayDisabledOninteraction:true,
/*
用户操作swiper,是否禁止autoplay
操作:触碰 拖动 点击 (分页)
默认是true 可选的值false
*/
autoplayStopOnLast:true,
/*
切换到最后一个slide停止自动切换
ps:loop时无效
默认:false不停
*/
grabCursor:true,
/*
鼠标指针形状(鼠标覆盖的时候是手,拖动的时候是抓手)
可选值:true false
默认:flase没有抓手
*/
//freeMode:true,
effect:'slider',
pagination:'.swiper-pagination',
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
loop:true,
})
//setInterval("mySwiper.slidePrev()",2000);
</script>
</html>
5.效果