使用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代码
})