什么是Swiper呢简单说就是别人写好封装好的js代码,我们可以直接拿过来用的。使用swiper来实现轮播图,是可以很快就能实现的,同时还缩减了需要我们自己去写的代码量,大大减少了我们的熬夜时间。
首先在使用之前第一步工作就是引入Swiper
1. 要想使用这个插件,首先得去官网下载需要得材料。Swiper插件官方地址:Swiper。
2. 下载完毕后,新建项目,把最基础的两个文件引入到页面中,如下所示
<link rel="stylesheet" href="../node_modules/swiper/dist/css/swiper.min.css">
<script src="../node_modules/swiper/dist/js/swiper.min.js"></script>
准备工作结束以后我们就可以准备使用swiper了
1.我们可以去Swiper中文网上选个喜欢的轮播图的效果。记住他的编号
2.选择好效果后,去自己下载的文件包中,找到对应编号的html网页。打开后,检查源代码,就可以看到轮播图的源代码了。
3.复制它的结构、样式以及轮播图的初始化部分。
4.将复制的内容发放到我们网页相对性的位置。
这样我们就完成了使用Swiper实现轮播图了