用Swiper实现轮播图


什么是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实现轮播图了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM