Swiper 常用功能及配置清单
内容来源于Swiper中文在线（http://www.swiper.com.cn/），由于Swiper功能强大，这里只将常用的功能列出来，方便开发。
这里统一使用Swiper最新版 4.0做为演示！
Swiper 有向个必需要注意的事项：
a) 默认是不自动播放的，需要手动开启：
autoplay: {
delay: 2500, // 自动播放间隔，单位ms
disableOnInteraction: false, // 值为false表示用户操作swiper之后，不会停止播放，值true停止
},
b) 默认点击分页器按钮是无法自动分页的，需要手动开启：
pagination :{
el: '.swiper-pagination',
clickable :true, // 开启分页按钮点击分页
}
c) 单独设置每个slide的停留时间，需要在slide增加属性，示例：
<div class="swiper-slide" data-swiper-autoplay="5000">增加了data-swiper-autoplay属性</div>
d) 实现循环翻屏模式，需要开启loop
loop : true
e) 实现自定义分页器样式，需要通过CSS控制，实例见演示十二
f) 默认swiper在PC端可以通过鼠标模板滑动效果，如果想关闭需要配置 simulateTouch 属性：
simulateTouch : false //禁止鼠标模拟
1、引用CDN外部文件：
<!-- CSS样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<!-- JS文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
2、HTML代码结构：
<!-- 代码结构中，粉色的部份是自定义的，其它部份不能更改且是必须的 -->
<!-- 样式： sampleCss 与 id: sample 为创建实例调用 -->
<div class="swiper-container sampleCss" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器，则加入下面代码 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮，则加入下面代码 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条，则加入下面代码 -->
<div class="swiper-scrollbar"></div>
</div>
3、创建Swiper实例：
语法：
new Swiper(swiperContainer, parameters)
参数：
swiperContainer : Swiper容器的css选择器，HTMLElement or string，必选。例如“.swiper-container”。
parameters : Swiper的个性化配置，object类型，可选。
演示一：指定索引值的Slide为初始化显示屏（initialSlide : [number]）：
比如我想让：<div class="swiper-slide">Slide 2</div> 这一屏优先显示，代码如下：
资料： http://www.swiper.com.cn/api/parameters/42.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
.swiper-wrapper .swiper-slide:nth-child(){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
/**
没有定义左右翻页按钮，同时也没有定义自动播放，所以只看到 Slide 2。
测试时可以用鼠标左右滑动，查看效果
**/
var mySwiper = new Swiper('#sample',{
initialSlide :
});
</script>
</body>
</html>
演示二：设置水平滑动或者垂直滑动（direction : [horizontal | vertical]）：
资料：http://www.swiper.com.cn/api/parameters/21.html
水平滑动：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
.swiper-wrapper .swiper-slide:nth-child(){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
alert('用鼠标可以在显示区域水平滑动');
var mySwiper = new Swiper('#sample',{
direction : 'horizontal'
});
</script>
</body>
</html>
垂直滑动：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
.swiper-wrapper .swiper-slide:nth-child(){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
.swiper-wrapper .swiper-slide:nth-child(){background:#;}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
alert('用鼠标可以在显示区域垂直滑动');
var mySwiper = new Swiper('#sample',{
direction : 'vertical'
});
</script>
</body>
</html>
演示三：自动播放（autoplay : [true | false]）：
资料：http://www.swiper.com.cn/api/autoplay/16.html
默认Swiper是不自动滑动，需要设置autoplay参数。
autopaly 设置有二种方式：
1) 简要模式：这种模式下，每隔三秒滑动一次，但用户操作了swiper之后就停止滑动！
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
<div class="tip">每隔三秒自动滑动，但用户操作了swiper之后会停止滑动<br/>用鼠标滑动一下就会停止自动滑动！</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true
});
</script>
</body>
</html>
2) 个性配置模式：
autoplay: {
delay : 1000, // [number]默认值为3000，自动切换停留时间间隔，单位ms，你还可以在某个slide上设置单独的停留时间，例<div class="swiper-slide" data-swiper-autoplay="2000">
stopOnLastSlide : true, //[true | false]默认值为false,如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
disableOnInteraction : false //[true | false] 默认值为true，表示用户操作swiper之后禁止自动播放
reverseDirection : true // [true | false]默认值为false,值为true时开启反向自动轮播
waitForTransition : true // [true | false] 默认值为true, 如果值为false则滑动还没结束就开始新的切换(不停顿的播放效果)
}
个性配置：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide" data-swiper-autoplay="5000">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
<div class="tip">1、第二个slide停留5秒，其它的停留1秒<br/>2、用户操作后不中止自动播放<br/>3、播放到最后时反转播放</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : {
delay : 1000,
disableOnInteraction : false, // 用户操作swiper后不中止自动播放
reverseDirection : true // 当播放到最后一个时反转播放
}
});
</script>
</body>
</html>
演示四：设置滑动速度，即开始滑动到结束的时间，单位ms（speed : [number]）：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
<div class="tip">1、每屏从开始滑动到结束滑动，用5秒来完成<br/>2、自动轮播，每屏停留2秒</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
speed : 5000, // 滑动过程耗时5秒
autoplay : {
delay : 1000,
disableOnInteraction : false, // 用户操作swiper后不中止自动播放
reverseDirection : true // 当播放到最后一个时反转播放
}
});
</script>
</body>
</html>
演示五：设置鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状，（grabCursor : [true | false]）：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
<div class="tip">鼠标移上去看下样式，拖动时看下样式</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
grabCursor : true
});
</script>
</body>
</html>
演示六：展示区域的高度随slide的高度而变化（autoHeight: [true | false]）：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
/*不能给容器限定高度，否则无效*/
/*height:300px;*/
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide" style="height:500px;line-height:500px;">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
<div class="tip">这里我使slide 2的高度为500像素</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script> var mySwiper = new Swiper('#sample',{
autoplay : true,
autoHeight : true
});
</script>
</body>
</html>
演示七：swiper嵌套写法（nested: [true | false]）：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide"> <!-- 这里是嵌套的swiper -->
<div class="swiper-container" id="childSample">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:#000">嵌套1/6</div>
<div class="swiper-slide" style="background:#C9C">嵌套2/6</div>
<div class="swiper-slide" style="background:#699">嵌套3/6</div>
<div class="swiper-slide" style="background:#990">嵌套4/6</div>
<div class="swiper-slide" style="background:#096">嵌套5/6</div>
<div class="swiper-slide" style="background:#F63">嵌套6/6</div>
</div>
</div> </div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
<div class="tip">被嵌套的swiper的nested设置为true。</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true
}); // 被嵌套的swiper，要加属性 nested
var childSample = new Swiper('#childSample',{
nested : true
});
</script>
</body>
</html>
演示八：【前进、后退按钮】显示前后翻屏按钮
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div>
</div>
<div class="tip">出现了左右翻屏按钮</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script> var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl: '#prev'
}
});
</script>
</body>
</html>
演示九：【前进、后退按钮】点击slide时显示或隐藏前后按钮（hideOnClick: [true | false]）：
代码如下，不过测试失效，具体见网直址：http://www.swiper.com.cn/api/navigation/356.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div>
</div>
<div class="tip">点击slide显示或隐藏左右按钮</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl: '#prev',
hideOnClick : true
}
});
</script>
</body>
</html>
演示十：【前进、后退按钮】设置前后按钮不可用时的样式（disabledClass: [string]）：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
.hide{display:none;}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div>
</div>
<div class="tip">当按钮不可用时，隐藏它</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl: '#prev',
disabledClass : 'hide' // 这个参数用于设置按钮不可用时的类名
}
});
</script>
</body>
</html>
演示十一：【前进、后退按钮】使用CSS样式，自定义按钮风格：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
/* 这里定义按钮样式 */
#prev{
width:20px;
background:#ccc;
height:150px;
margin-top:-75px;
}
#next{
width:20px;
background:#900;
height:150px;
margin-top:-75px;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div>
</div>
<div class="tip">使用CSS样式定义前进、后退按钮样式</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl: '#prev'
}
});
</script>
</body>
</html>
演示十二：【分页导航】加载分页导航
要显示分页按钮，必须在HTML代码内包含：
<div class="swiper-pagination"></div>
分页导航常用设置如下：
<script>
pagination: {
el : '.swiper-pagination', // [string]分页器容器
type : , //[string] 分页器样式： bullets 圆点/默认值 、fraction 分式(比如3/6)、progressbar 进度条、custom 自定义
bulletClass : , // 分页器内元素的类名。
bulletActiveClass : // 分页器内活动(active)元素的类名
dynamicBullets : , // [true | false]动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
dynamicMainBullets : , // [number] 分页器显示的指示点数量。当页数多时，但我们只想显示5个分页点，可以用这个来设置
clickable : , // [true | false] 默认值为false,此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
// ... 更多配置见：http://www.swiper.com.cn/api/pagination/362.html
}
</script>
自定义分页按钮样式代码：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
.my-bullet{
width:10px;
height:10px;
display:inline-block;
background:#fff;
margin:0px 5px;
cursor:pointer;
}
.my-bullet-active{
width:100px;
height:10px;
border-radius:6px;
background:#000 !important;
display:inline-block;
margin:0px 5px;
cursor:pointer;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div> <div class="swiper-pagination"></div>
</div>
<div class="tip">使用CSS样式控制分页按钮样式</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl : '#prev'
},
pagination: {
el : '.swiper-pagination',
clickable : true,
type : 'bullets',
bulletClass : 'my-bullet', // 分页器内元素的类名。
bulletActiveClass : 'my-bullet-active' // 分页器内活动(active)元素的类名 }
});
</script>
</body>
</html>
演示十三：【翻页特效】淡入、立体方块、3D、翻转（effect : [ slide位移切换 | fade淡入 | cube方块 | coverflow 3D流 | flip 3D翻转 ]）
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#fff;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
.my-bullet{
width:10px;
height:10px;
display:inline-block;
background:#fff;
margin:0px 5px;
cursor:pointer;
}
.my-bullet-active{
width:100px;
height:10px;
border-radius:6px;
background:#000 !important;
display:inline-block;
margin:0px 5px;
cursor:pointer;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div> <div class="swiper-pagination"></div>
</div>
<div class="tip">参数effect控制翻屏特效，可选值： slide(默认，位移切换)、 fade(淡入) 、 cube（方块）、 coverflow（3D流）、 flip（3D翻转）</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl : '#prev'
},
effect : 'cube' // 这里采用方块显示
});
</script>
</body>
</html>
演示十四：鼠标移上去停止播放，移出时恢复播放
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<style>
#sample {
width:500px;
height:300px;
}
.swiper-wrapper .swiper-slide{
color:#111;
text-align:center;
line-height:300px;
}
.swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
.swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
.swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
.swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
.swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
.swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
.tip{
width:500px;
clear:both;
margin:auto;
color:#00F;
padding-top:10px;
}
.my-bullet{
width:10px;
height:10px;
display:inline-block;
background:#fff;
margin:0px 5px;
cursor:pointer;
}
.my-bullet-active{
width:100px;
height:10px;
border-radius:6px;
background:#000 !important;
display:inline-block;
margin:0px 5px;
cursor:pointer;
}
</style>
</head> <body>
<div class="swiper-container" id="sample">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<div class="swiper-button-prev" id="prev"></div>
<div class="swiper-button-next" id="next"></div> <div class="swiper-pagination"></div>
</div>
<div class="tip">鼠标移上去停止播放，移出去恢复播放</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#sample',{
autoplay : true,
navigation : {
nextEl : '#next',
prevEl : '#prev'
} });
//鼠标覆盖停止自动切换
mySwiper.el.onmouseover = function(){
mySwiper.autoplay.stop();
}
mySwiper.el.onmouseleave = function(){
mySwiper.autoplay.start();
}
</script>
</body>
</html>
Swiper 常用功能及配置清单的更多相关文章
- nginx常用功能和配置
nginx常用功能和配置 1.nginx常用功能和配置 1.1 限流 1.2 压力测试工具--Ab 1.2.1安装 1.2.2 测试 1.2.3 返回值 1.3 limit_conn_zone 1.4 ...
- 5.8 Nginx 常用功能的配置
- Nginx常用功能配置二
Nginx常用功能配置二 Nginx location匹配设置 location作用:可以根据用户请求的URI来执行不同的应用,根据用户请求的网站的地址URL匹配. location语法: locat ...
- Nginx常用功能配置一
Nginx常用功能配置 参数include配置 说明:如果日常工作中server标签存在太多,可以采用include配置模式,Nginx的主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目 ...
- Echarts图表常用功能配置，Demo示例
先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...
- [转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
- WebPack常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
- Keil的使用方法 - 常用功能（二）
Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(一),关于(文件和编译)工具栏每一个按钮的功能描述和快捷键的使用. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链 ...
- Keil的使用方法 - 常用功能（一）
Ⅰ.概述 学习一门软件的开发,开发工具的掌握可以说尤为重要.由于Keil集成开发工具支持多种MCU平台的开发,是市面上比较常见的,也是功能比较强大一款IDE.所以,对于大多数人说,选择Keil几乎是单 ...
随机推荐
- 通过sql语句查询出来的结果字段没有到对应实体类时的处理方法
通过sql语句查询出来的结果字段没有到对应实体类时的处理方法,对于Person类获取用户第一个名字和年龄两个字段,常见的有两种方式: 1.在创建一个与查询结果字段对应的类,然后通过构造函数实现: Qu ...
- iview+axios实现文件取消上传
iview+axios实现文件取消上传 iview框架的上传文件目前不支持在上传文件的过程中取消上传,结合axios请求可以实现:使用iview的上传和拖拽功能,却使用axios的上传文件功能来实现取 ...
- 访问oracle数据库
如果是本地 :sqlplus system/xxx(用户名/密码) 远程到服务器, sqlplus system/xxx(用户名/密码) @IP:port/orcl(orcl为数据库实例)
- oracle-sql脚本导出EXCEL数据
在数据库中,经常有业务人员提出需求导出数据库中的业务数据,而且是每天.每周或每月定时导出.为了方便,可将sql查询的脚本 通过下面脚本来导出EXCEL数据. 1.将查询sql脚本(AAA.sql)放到 ...
- c#数据库连接池
因为使用习惯的问题,我封装了一个数据库连接池Hikari,这是我自定义的数据库连接池.因为c#的连接池按照规范的ADO.NET里面实现定义的,由数据库官方提供,但是实现方式就不知道了,反正没有看出来, ...
- c# 任务超时执行
最近整理下各类框架,学习一下欠缺的东西.因为前一年开发过java服务端,知道java有很多开源框架,但是毕竟起来也很累. 现在转回头从新审视c#,很基础,没有开源框架,因为以前它不开源,所以少,不用比 ...
- zepto 基础知识(4)
61.prev prev() 类型:collection prev(selector) 类型:collection 获取对相集合中每一个元素的钱一个兄弟节点,通过选择器来进行过滤 62.prev pr ...
- D - 湫湫系列故事——减肥记II
虽然制定了减肥食谱,但是湫湫显然克制不住吃货的本能,根本没有按照食谱行动! 于是,结果显而易见… 但是没有什么能难倒高智商美女湫湫的,她决定另寻对策——吃没关系,咱吃进去再运动运动消耗掉不就好了? 湫 ...
- 大专生自学c++到找到工作的前前后后
先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...
- linux系统基础之---账号管理（基于centos7.4 1708）