使用Swiper插件

使用Swiper插件制作轮播图

一、官网下载Swiper文档

Swiper中文网：https://www.swiper.com.cn

也可以不下载，在官网查看想要的样式，右击查看页面源代码，点击代码中引用的css与js文件可以跳转到代码页面，复制到文件中即可。

二、引入css，js文件

    <!-- 引入swiper css文件-->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- 引入swiper js文件 -->
    <script src="js/swiper-bundle.min.js"></script>
    <!-- 先引入swiper js文件再引入index js -->
    <script src="js/index.js"></script>

一定要先引入Swiper里面的js文件，再引入index.js。

（注意引入css文件是用<link>,引入js文件是用<script>）

三、复制html结构，复制css样式，复制js

① 复制html（不要更改里面的结构和类名）

② 复制css

③ 复制js

放到index.js里面

// 页面加载完再执行
window.addEventListener('load', function () {
    // 复制的js代码
})