内容来源于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 常用功能及配置清单的更多相关文章

  1. 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 ...

  2. 5.8 Nginx 常用功能的配置

  3. Nginx常用功能配置二

    Nginx常用功能配置二 Nginx location匹配设置 location作用:可以根据用户请求的URI来执行不同的应用,根据用户请求的网站的地址URL匹配. location语法: locat ...

  4. Nginx常用功能配置一

    Nginx常用功能配置 参数include配置 说明:如果日常工作中server标签存在太多,可以采用include配置模式,Nginx的主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目 ...

  5. Echarts图表常用功能配置,Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  6. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  7. WebPack常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  8. Keil的使用方法 - 常用功能(二)

    Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(一),关于(文件和编译)工具栏每一个按钮的功能描述和快捷键的使用. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链 ...

  9. Keil的使用方法 - 常用功能(一)

    Ⅰ.概述 学习一门软件的开发,开发工具的掌握可以说尤为重要.由于Keil集成开发工具支持多种MCU平台的开发,是市面上比较常见的,也是功能比较强大一款IDE.所以,对于大多数人说,选择Keil几乎是单 ...

随机推荐

  1. 【洛谷P1108】低价购买

    低价购买 题目链接 n<=5000 n^2的算法是可以接受的 第一个数字显然是求最长下降子序列,可以n^2或nlognDP 要求方案数,可以在n^2算法中做一些修改,DP求方案数 dp[i]表示 ...

  2. 【luogu P3369 【模板】普通平衡树(Treap/SBT)】 题解 pb_ds

    我永远都爱STL ! 我爱PB_DS ! #include <iostream> #include <cstdio> #include <ext/pb_ds/tree_p ...

  3. some small knowledge

    cookie 增查 <!--1.语义化标签的作用--> <!--1.1 从开发角度考虑是提高代码的可读性可维护性--> <!--1.2 网站的发布者:seo 搜索引擎优化 ...

  4. Java笔试--代码纠错

    package practice.javase; public abstract class Name { private String name; public abstract boolean i ...

  5. 记录一次LOB损坏导致的EXPDP导出ORA-01555报错

    同事导出数据,结果遇到如下报错: expdp user1/XXXXXXXX directory=szdata1 dumpfile=szhzinfo_20180319.dmp logfile=szhzi ...

  6. Python基础—01-认识python,编写第一个程序

    认识python 发展历史:点此查看简介 就业方向: WEB.爬虫.运维.数据分析.机器学习.人工智能.... 版本选择 python2.7是最后一个py2的版本,2020年将不再提供支持 pytho ...

  7. SQL里的concat() 以及group_concat() 函数的使用

    实例参考:https://blog.csdn.net/mary19920410/article/details/76545053 一 concat()函数 1.功能:将多个字符串连接成一个字符串. 2 ...

  8. 从 React 的组件更新谈 Immutable 的应用

    在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的. React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态. ...

  9. SmallMQ实现发布

    最近一直学习,主要处理java的分布式,MQ,RPC,通信,数据库,缓存等方向. 一般现在的MQ都是企业级的,庞大,功能齐全.最主要是代码量大,对于我们这些小程序员而言,太大,修改困难,修复更加困难, ...

  10. BZOJ 1193--马步距离

    1193: [HNOI2006]马步距离 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2267  Solved: 1026[Submit][Stat ...