一.官网地址：
二.使用方法：
使用步骤：
1.引入插件
2.创建HTML结构内容
3.初始化swiper
详细方法：
1.下载swiper的swiper库文件，下载后把css和js文件拷贝到项目中
把相关css和js文件放在到项目文件中
在dist文件中找到相关的css和js
注意：css当中swiper.css是标准版，swiper.min.css代表是压缩版
js同理。
接下来引入到项目中
<!--在页面中引入swiper的css和js文件 -->
<link rel="stylesheet" href="dist/css/swiper.min.css">
<script src="dist/js/swiper.min.js"></script>
2.创建HTML结构内容
右击查看源码，拷贝demo结构
拷贝当前demo的样式 全部拷贝 通过修改.swiper-container的宽高来显示轮播区域的大小
拷贝本demo的js 查阅官网的api去配置你想要的效果及样式 (以下是常用配置)
当然，需要其他的样式，可以去查找API
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>swiper轮播图的使用</title>
<!-- 引入swiper的轮播相关文件夹css-->
<link rel="stylesheet" href="dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
/* width: 100%;
height: 100%; */
width: 540px;
height: 240px;
}
.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;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/banner01.png)">1</div>
<div class="swiper-slide" style="background-image:url(img/banner02.png)">2</div>
<div class="swiper-slide" style="background-image:url(img/banner01.png)">3</div>
<div class="swiper-slide" style="background-image:url(img/banner02.png)">4</div>
<div class="swiper-slide" style="background-image:url(img/banner01.png)">5</div>
<div class="swiper-slide" style="background-image:url(img/banner02.png)">6</div>
</div>
<!-- 如果需要分页器 (小圆点)-->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- 左箭头。如果放在swiper-container外面，需要自定义样式 -->
<div class="swiper-button-prev" @click="prev"></div>
<!-- 右箭头。如果放在swiper-container外面，需要自定义样式 -->
<div class="swiper-button-next" @click="next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<!-- 导航等组件可以放在container之外 -->
<!-- 引入swiper的轮播相关js文件夹 -->
<script src="dist/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>
</body>
</html>
最后，同时可以参考swiper使用方法Swiper使用方法 - Swiper中文网