HTML+CSS使用swiper快速生成最简单、最快捷、最易看懂的轮播图


 

1.  在网页顶部输入swiper.com.con,进入swiper官网

 

 

 

 

2.   点击” API文档”,获取轮播图代码的地方

 

 

 

 

3.   点击左侧“swiper初始化“,获取样式模板

 

 

 

 

复制对应代码,不用打叉部分:(注意,后面那个 < / script> 还是要的,嘿嘿嘿)

 

 

 

 

4.   点击 获取swiper” 下的“swiper CDN地址“,意思就是使用网上存在的CDN地址,不用您下载对应的CSS文件

 

 

 

 

5.   找到对应的导入文件复制放到网页head部分:

  本人不建议使用min版本,唯恐功能不全,不能满足您的欲望。

 

 

 

 

Link script

 

把版本改成4.0.1或者4.0,2,两者要保持相同

 

因为使用的是CDN地址,确保在有网络的情况下执行。

 

 

 

6.调整轮播图样式可以在这里复制粘贴,全部都有:

  什么花雕样式都有,怎么翻轮播图也有,怎么爽就怎么来

  这里只是指明了部分小功能,其他可以点进去看展示

 

 

 

  但是注意,不是盲目全部粘贴过来,只是粘贴对应的几行,例如:

 选择轮播图-无缝轮播,loop(环路),

 

 

 只需要复制圈出的“loop:true;”代码到对应位置即可

 

其中:分页器里就有轮播图小按钮圈圈点击选择页功能。

 

 

 

这样轮播图就能实现,如果看不到效果,可以给样式加背景颜色观察,另外样式都可以定义CSS添加。

 

 如有没有弄明白的“28岁老程序员”们,欢迎评论留言,第一时间反馈给您,让您少掉两根头发。

 


免责声明!

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



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