一、参考文档
1.官网：
2.案例展示：
3.获取swiper文件：
4.API文档：
二、使用步骤
（一）系统定制开发简易案例步骤
1.进入官网，先将swiper下载下来。
系统定制开发获取里面的两个文件：
一个css文件、一个js文件。系统定制开发稍后需要使用。
2.操作步骤
（1）在案例里面找到自己喜欢的样式。点击它右上角的“在新窗口打开”
（2）得到该案例的全屏展示效果，右键——查看页面源代码
（3）展开之后看到源代码，直接全部复制，并粘贴到自己的html文件里面。把标红地方的路径地址改为自己本地的路径。（上面已经让你下载过了）
（4）目录结构。
（5）整体结构与使用
效果展示：
（6）简易案例的全部代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>轮播图</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="./css/swiper-bundle.min.css"> <!-- Swiper JS --> <script src="./js/swiper-bundle.min.js"></script> <!-- Demo styles --> <style> .swiperBox{ width: 400px; height: 300px; border: 1px solid red; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style> </head> <body> <div class="swiperBox"> <!-- Swiper --> <div class="swiper mySwiper"> <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> <!-- 前进后退按钮 --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
（二）如果想实现其他功能，需要查看API文档
比如：
我想实现自动，找到有关的API点进去看看。
也就是说写上autoplay:true就可以实现自动轮播，如果我想调整时间呢，一秒钟切换一次。delay属性控制时间。
var mySwiper = new Swiper('.swiper', { autoplay: { delay: 1000,//1秒切换一次 },});- 1
- 2
- 3
- 4
- 5
如果想出现分页器：
如果想循环则使用：
如果想复制文字：
以上都加上之后的效果是：
代码：
三、总结
1.进入官网，找到喜欢的样式，复制源代码，然后该js和css文件路径。
2.根据API文档找到自己想要的功能。