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

2024-10-20 16:48:17

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岁老程序员”们，欢迎评论留言，第一时间反馈给您，让您少掉两根头发。

1. 顶部输入swiper.com.con

2. 点击” API文档”

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

复制对应代码，不用打叉部分：

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

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

Link 和 script

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

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

6．调整轮播图样式可以在这里复制粘贴，全部都有：

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

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

最新文章

热门文章