【Web APIs】移动端常用的 JavaScript 开发插件 ③ ( Swiper 插件简介 | Swiper 插件使用方法 | Swiper 插件使用步骤 )
文章目录
- 一、Swiper 插件简介
- 1、核心概念
- 2、核心特点
- 二、Swiper 插件使用方法
- 1、下载 Swiper 插件
- 2、Swiper 插件案例
- 3、Swiper 插件案例源码查看
- 4、Swiper 插件案例源码分析
- 5、Swiper 插件 API 文档
- 三、Swiper 插件使用步骤
- 0、使用文档
- 1、步骤一 : 加载插件
- 2、步骤二 : 加载插件
- 3、步骤三 : 设置 Swiper 轮播图大小
- 4、步骤四 : 初始化 Swiper
一、Swiper 插件简介
1、核心概念
Swiper 是一款轻量级、高性能、无框架依赖 的 原生 JavaScript 插件, 同时 提供 Vue/React/Angular 等框架 专属版本 , 核心专注于实现页面元素 的 轮播、滑动切换 交互, 广泛应用于移动端和 PC 端项目 ;
Swiper 插件 目前已成为 前端轮播 / 滑动场景的 事实标准, 常见使用场景包括 :
- 移动端首页轮播图、商品详情图滑动预览
- PC 端横幅广告轮播、画廊图片切换
- 滑动式导航、步骤条、移动端页面左右滑切屏
2、核心特点
Swiper 核心特点 :
- 跨端兼容优异 :完美支持移动端( iOS/Android 各类浏览器、微信内置浏览器 ) 和PC 端( Chrome/Firefox/Edge 等 ) ,兼容老旧浏览器( 如 IE10+ ) , 无需额外做兼容适配 ;
- 功能丰富强大 :不仅支持基础的水平轮播 , 还提供垂直轮播、循环播放、3D 效果、缩略图联动、无限滑动、自动播放等数十种功能, 满足各类复杂滑动场景需求 ;
- 高可定制性 :暴露大量可配置参数、钩子函数 ( 回调 ) 和 公共 API, 开发者可自定义滑动速度、切换动画、分页器样式、触发逻辑等 , 实现高度个性化需求 ;
- 性能流畅高效 :内置硬件加速机制, 滑动过程流畅无卡顿 , 同时优化了边界情况 ( 如快速滑动、滑动到首尾 ) , 提升用户体验 ;
- 模块化与生态完善 :现代版本 ( Swiper 6+ ) 采用模块化设计 , 可按需引入功能模块减小文件体积; 同时提供框架专属版本 ( swiper/vue、swiper/react ) , 贴合框架语法规范 , 在框架项目中使用更丝滑 ;
- 无强制依赖 :原生 JS 版本无需依赖 jQuery、Vue 等任何库 / 框架, 可直接在纯 HTML / JS 项目中使用 , 上手门槛低 ;
二、Swiper 插件使用方法
1、下载 Swiper 插件
Swiper 插件 官网 : https://www.swiper.com.cn/ ;
点击顶部的 " 获取 Swiper " 按钮 , 在弹出的 下拉菜单 中 , 选择 " 下载 Swiper " 选项 , 即可进入下载页面 ;
在下载页面 https://www.swiper.com.cn/download/index.html 中 , 可以选择要下载的 插件版本 , 一般都下载最新版本即可 ;
最新版的 swiper-11.0.3 的下载地址是 : https://www.swiper.com.cn/download/swiper-11.0.3.zip ;
2、Swiper 插件案例
在首页 中 , 选择 " 在线演示 " 的 " Swiper 基础演示 " ;
进入到 https://www.swiper.com.cn/demo/index.html 基础演示页面 , 假如我们想要 使用 " 分页器(030) " 案例 ,
3、Swiper 插件案例源码查看
将下载的 swiper-11.0.3.zip 压缩包 , 解压后得到一个 swiper-11.0.3 目录 , 在 Y:\002_WorkSpace\014_HTML\swiper-11.0.3\swiper\demo 中可以看到 030-pagination.html 文件如下所示 :
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><title>Swiper demo</title><metaname="viewport"content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/><!-- Link Swiper's CSS --><linkrel="stylesheet"href="../swiper-bundle.min.css"/><!-- Demo styles --><style>html, body{position:relative;height:100%;}body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}.swiper{width:100%;height:100%;}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:flex;justify-content:center;align-items:center;}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;}</style></head><body><!-- Swiper --><divclass="swiper mySwiper"><divclass="swiper-wrapper"><divclass="swiper-slide">Slide 1</div><divclass="swiper-slide">Slide 2</div><divclass="swiper-slide">Slide 3</div><divclass="swiper-slide">Slide 4</div><divclass="swiper-slide">Slide 5</div><divclass="swiper-slide">Slide 6</div><divclass="swiper-slide">Slide 7</div><divclass="swiper-slide">Slide 8</div><divclass="swiper-slide">Slide 9</div></div><divclass="swiper-pagination"></div></div><!-- Swiper JS --><scriptsrc="../swiper-bundle.min.js"></script><!-- Initialize Swiper --><script>varswiper=newSwiper(".mySwiper",{pagination:{el:".swiper-pagination",},});</script></body></html>4、Swiper 插件案例源码分析
在上述代码中 , 发现引入了../swiper-bundle.min.js样式文件 ,
<!-- Link Swiper's CSS --><linkrel="stylesheet"href="../swiper-bundle.min.css"/>和../swiper-bundle.min.jsJS 脚本 , 注意 引入 JS 脚本时 , 先引入第三方 JS 脚本 , 再引入自己写的 JS 脚本 ;
<!-- Swiper JS --><scriptsrc="../swiper-bundle.min.js"></script>使用 Swiper 实现轮播图 必须使用如下 HTML 结构 , 不要更改 下面的 HTML 结构的 CSS 类名 ;
<!-- Swiper --><divclass="swiper mySwiper"><divclass="swiper-wrapper"><divclass="swiper-slide">Slide 1</div><divclass="swiper-slide">Slide 2</div><divclass="swiper-slide">Slide 3</div><divclass="swiper-slide">Slide 4</div><divclass="swiper-slide">Slide 5</div><divclass="swiper-slide">Slide 6</div><divclass="swiper-slide">Slide 7</div><divclass="swiper-slide">Slide 8</div><divclass="swiper-slide">Slide 9</div></div><divclass="swiper-pagination"></div></div>将下面的与 Swiper 插件样式相关的代码 复制到自己的代码中 ;
.swiper{width:100%;height:100%;}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:flex;justify-content:center;align-items:center;}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;}使用 Swiper 实现轮播图 的 JS 代码如下所示 :
<!-- Initialize Swiper --><script>varswiper=newSwiper(".mySwiper",{pagination:{el:".swiper-pagination",},});</script>5、Swiper 插件 API 文档
在上述的 js 代码中有如下配置 , Swiper 构造函数中 , 配置的 pagination 等选项 ;
<!-- Initialize Swiper --><script>varswiper=newSwiper(".mySwiper",{pagination:{el:".swiper-pagination",},});</script>这些配置都可以在 Swiper API 文档 https://www.swiper.com.cn/api/index.html 中找到 , 下面的截图中展示的就是 分页器 pagination 组件的 相关配置 ;
三、Swiper 插件使用步骤
0、使用文档
在 Swiper 中文教程页面 https://www.swiper.com.cn/usage/index.html 中 , 有 Swiper 插件的详细用法 :
1、步骤一 : 加载插件
加载 Swiper 插件 , 最新版的 插件 需要用到的文件有 swiper-bundle.min.js 和 swiper-bundle.min.css 文件 ;
<!DOCTYPEhtml><html><head>...<linkrel="stylesheet"href="dist/css/swiper-bundle.min.css"></head><body>...<scriptsrc="dist/js/swiper-bundle.min.js"></script>...</body></html>2、步骤二 : 加载插件
在 HTML 页面中 添加 HTML 内容 , Swiper7 的默认容器是'.swiper', Swiper6之前是'.swiper-container';
<divclass="swiper"><divclass="swiper-wrapper"><divclass="swiper-slide">Slide 1</div><divclass="swiper-slide">Slide 2</div><divclass="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><divclass="swiper-pagination"></div><!-- 如果需要导航按钮 --><divclass="swiper-button-prev"></div><divclass="swiper-button-next"></div><!-- 如果需要滚动条 --><divclass="swiper-scrollbar"></div></div><!-- 导航等组件可以放在Swiper容器之外 -->3、步骤三 : 设置 Swiper 轮播图大小
给 Swiper 定义一个大小 , 为 HTML 结构的最外层的<div class="swiper">布局设置 大小属性 , 也可以不设置 ;
.swiper{width:600px;height:300px;}4、步骤四 : 初始化 Swiper
使用下面的代码 初始化 Swiper ;
<script>varmySwiper=newSwiper('.swiper',{direction:'vertical',// 垂直切换选项loop:true,// 循环模式选项// 如果需要分页器pagination:{el:'.swiper-pagination',},// 如果需要前进后退按钮navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},// 如果需要滚动条scrollbar:{el:'.swiper-scrollbar',},})</script>