swiper
介绍
Swiper是一款前端制作轮播图的插件
安装
cdn
可以进入https://www.swiper.com.cn/cdn/index.html 直接复制,一般使用4.0.1版本,复制下面两行,并且修改版本号即可。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>
将版本号改为4.0.1
,不能用4.0.0
,有bug。
安装到本地
将cdn的路径直接复制到浏览器打开,保存到本地,可行但太low,不适合我们高端人才。
使用npm
npm init -y
npm i swiper@4.0.1
引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
</body>
</html>
如上,即可将swiper引入到我们的项目中。
注意:由于我们使用的swiper4,最外层class名要改为
swiper-container
,下面的js也要改
配置
接下来就可以按照swiper官方文档,根据自己的需求,个性化定制你的专属swiper了
pagination分页器
不要忘记html标签也要复制,注意粘贴位置
navigation前进后退按钮
注意html标签也要复制,注意粘贴位置
多个轮播图
查看autoplay介绍文字