本文记录了在Vue项目中使用Swiper插件创建轮播图的步骤，包括通过npm安装swiper@5，如何在index.html引入所需css和js文件，设置HTML结构，定义Swiper容器大小，以及在Vue组件中正确初始化swiper。
1、下载一个版本的swiper，这里以5.4.5为例，
在项目开发过程中需要安装swiper插件
npm install swiper@5
官网地址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
2、先在index.html中引入swiper包，包括css和js
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
