运行图：
1、上Seiper官网 下载Swiper需要的文件 如下图：【可任意下载一个】
2、文件解压之后，找到文件swiper-bundle.min.js和swiper-bundle.min.css文件【带有min的为压缩文件，但是两种都可以使用】，然后拷贝到根目录下，以备后续调用
3、点击网页的在线演示，然后查看自己想要的轮播图样式，选中之后可以点其右上角的在新窗口打开，进入选中网页后，就可以查看源代码了，然后在文件对应的位置link引入css，script标签src引入js,并将css样式、html、script new的对象复制与代码中
4、此时轮播图是占据整个页面的，可以根据需要把轮播图的html代码复制给自己定义的盒子，然后定义自定义盒子的css宽高，可根据需要的轮播图属性在api文档里面查找然后在对象里进行定义
比如下面代码实现了基本轮播图的第一种案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./swiper-bundle.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 {
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;
}
.box {
width: 100%;
height: 210px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="box">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/desktop_1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_5.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_6.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_7.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_8.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/desktop_10.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="./swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
// 无限循环
loop: true,
// 自动播放
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
});
</script>
</body>
</html>
