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几乎是单 ...
随机推荐
- Webpack2入门
webpack 2 将在其文档完成之后正式发布.但这并不意味着不可以开始使用它,如果你知道怎么配置的话. 什么是 Webpack? 简单来说,Webpack 就是一个针对 JavaScript 代码的 ...
- Angularjs实例5
<!DOCTYPE html><html lang="zh-cn" ng-app="myApp"><head><met ...
- Linux服务器SMB服务挂载目录
挂载方法 mount -o username=账号,password=密码 //SMB服务器IP/共享目录 /挂载点 smbclient链接 smbclient //SMB服务器IP/共享目录/ -U ...
- UICollectionViewCell「居左显示」
UICollectionViewCell「居左显示」 准备: 1.UICollectionView Left Aligned Layout 一款UICollectionView居左显示的约束点击下载_ ...
- flask笔记(二)
Flask中的路由 查看整个flask中的路由映射关系 app.url_map from flask import Flask app = Flask(__name__) @app.route(&qu ...
- 【2018 CCPC网络赛 1004】Find Integer（勾股数+费马大定理）
Problem Description people in USSS love math very much, and there is a famous math problem . give yo ...
- unbuntu16初始化设置，并解决虚拟机操作系统窗口不能自适应问题
版本说明: 虚拟机:VMware Workstation 12.5.2 操作系统:ubuntu 16.04 unbuntu不同版本的下载链接:http://old-releases.ubuntu.co ...
- ubuntu多版本php切换
最近想要学习一下swoole,虽然机子上装的是php7.0,但是考虑到一些有关swoole的轮子要依赖更高版本(例如swooletw),所以就在机子上升级了php7.2,下面是在网上搜索或者自己折腾出 ...
- django环境搭建和学习
由于服务器down了好几天,前几天做的django的project全都在上面,无法继续开展工作,所以决定在本地重新部署一套virtualenv 之前没有好好整理过部署过程(其实也不难),所以决定写个随 ...
- php面向对象基础知识整理之类中的属性和方法的使用
<?php /** * class Index * 类包含什么 * 1.创建类 * 2.类的属性和类中方法 * 3.类中访问修饰符 * 4.类的封装.继承.多态 */ // 创建类,创建的类名是 ...