1.引入插件相关文件。
(1) 打开中文官网地址： https://www.swiper.com.cn/
(2) 点击上 获取Swiper，点 下载Swiper，点需要的zip文档下载
e.g.下载swiper-8.3.0.zip
(3) 下载后，去下载好的swiper-8.0.0.zip文件夹中【旧版本是文件夹demos中】
(4) 复制里面的swiper-bundle.min.js文件和swiper-bundle.min.css文件去自己的项目的文件夹中的js和css文件夹中
(5) 在自己项目的html文件（例如index.html）中引入swiper-bundle.min.js文件和swiper-bundle.min.css文件
(6) 在自己项目文件夹中的js文件夹中新建index.js,在index.html中引入index.js
【html中引入JS文件的时候，先引入swiper-bundle.min.js，再引入index.js】
e.g.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入我们的css初始化文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入我们首页的css -->
<link rel="stylesheet" href="css/index.css">
<!--先引入swiper css文件 -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- 引入swiper js 文件 -->
<script src="js/swiper.min.js"></script>
<!-- 引入我们自己的js文件 -->
<script src="js/index.js"></script>
<title>Document</title>
</head>2.按照规定语法使用
(1) 点击下载好的zip文档中的想要的轮播图效果（具体效果对应的html编号去中文官网地址： https://www.swiper.com.cn/的上面点 在线演示-Swiper基础演示-在下面找想要的效果）浏览器打开对应的html文件
e.g. 看到 030 效果想用
下载好的swiper-8.0.0.zip文件夹中的demo文件夹中，找到030-pagination.html
浏览器打开，右击 查看网页源代码
(2) 复制该html文件（例如030-pagination.html）的源代码中的<body>中的<!-- Swiper -->部分 去index.html的html中的焦点图的位置
e.g.复制以下
<!-- 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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>在index.html中粘贴后，修改Slide1,Slide2…为对应的图片
e.g.
(3) 去该html文件（例如030-pagination.html）的源代码中复制<style></style>中的swiper相关的CSS部分，粘贴到index.css中
e.g.复制以下
.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;
}(4) 去该html文件（例如030-pagination.html）的源代码中复制<script></script>中的代码 ，去index.js中粘贴
e.g.1复制以下
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});index.js中,以上粘贴在window.addEventListener(‘load’,function(){})里面
window.addEventListener('load', function () {
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});
})e.g.2复制以下
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});index.js中,以上粘贴在window.addEventListener(‘load’,function(){})里面
window.addEventListener('load', function () {
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
})3.如想要修改index.js中数值的时候
去中文官网地址： https://www.swiper.com.cn/的上面点 API文档
在左边的组件里面找对应单词的含义
e.g.1
点击 组件中-Autoplay（自动切换）-delay
从右边界面，可以得知delay是代表 自动切换的时间间隔，单位ms
所以可以在index.js中 改delay:后的数值 e.g. delay:6000;
e.g.2
点击 组件中-Pagination（分页器）-clickable
从右边界面，可以得知true参数相关情况
4.如想在index.html中对复制过来的轮播图的css进行更改
Alt+B浏览器打开index.html, 按F12 ，点击下的小箭头，选中网页页面中想调整的地方(例如：选中轮播图的小圆点 ) 控制台的Elements中，显示小圆点的对应CSS类名
e.g.要把小圆点的颜色改为白色
在控制台中，Elements中得知，小圆点是
复制该类名，去index.css中，原轮播图小圆点代码之后粘贴
修改颜色，并且加上权重 ！important
/* 之前部分为其他小圆点相关代码 */
/* 修改小圆点颜色 */
.swiper-pagination-bullet {
background: #fff !important;
}
