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

 

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

 

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

 

 

 

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

 

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

 

 

 

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

 

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

 

 

 

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

 

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

 

 

 

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

 

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

 

 

 

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

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

 

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

 

 

 

Link script

 

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

 

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

 

 

 

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

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

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

 

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

 

 

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

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

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

 

 

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

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

 

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

 

 

 

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

 

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

 

 

 

 

1.   顶部输入swiper.com.con

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

2.   点击” API文档

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

 

 

 

 

 

 

 

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

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

复制对应代码,不用打叉部分:

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

4.   点击 获取swiper” 下的“swiper CDN地址“

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

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

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

Link script

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

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

 

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

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

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

 

轮播图就能实现,如果看不到,可以给样式加背景颜色观察。

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

上一篇:Django中URL的包含使用


下一篇:AtCoder ABC 140D Face Produces Unhappiness