Swiper 是一款开源, 免费, 功能十分强大的移动端内容触摸滑动插件, 目前的最新版本是 Swiper4.Swiper 主要面向的是手机, 平板电脑等移动设备, 帮助开发者轻松实现触屏焦点图, 触屏 Tab 切换, 触屏多图切换等常用效果. 本文简单介绍一下 Swiper 的使用方法.
下载和安装 Swiper
首先我们需要下载 Swiper 的相关文件:
我们可以直接从 Github https://github.com/nolimits4web/Swiper/tree/master/dist 代码仓库中下载.
或者通过 Bower 下载:
$ bower install swiper
或者使用 Atmosphere 将 Swiper 制作成 Meteor 包:
$ meteor add nolimits4web:swiper
或者使用 NMP(JavaScript 包管理工具) 下载:
$ npm install swiper
下载压缩包后解压, 我们需要用到的 js 文件和 CSS 文件都在 dist 目录中.
从 CDN 引用 Swiper
如果你不想将 Swiper 文件资源放到自己的项目中或者服务器上, 那么可以使用 CDN 上的资源, 这样可以让不同地区的用户有最快的加载速度, 也可以减轻你服务器的负担, 下面是可用的 CDN 文件列表:
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>
不要忘记将版本号 4.x.x 替换成自己使用的版本号
将 Swiper 文件包含到网站中
接下来我们将 Swiper 的 JS 文件和 CSS 文件分别包含到自己的网站或者 App 中, 代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- ...
- <link rel="stylesheet" href="path/to/swiper.min.css">
- </head>
- <body>
- ...
- <script src="path/to/swiper.min.js"></script>
- </body>
- </html>
为滑块添加 HTML 布局结构
下面我们创建最基本的布局:
- <!-- Slider main container -->
- <div class="swiper-container">
- <!-- Additional required wrapper -->
- <div class="swiper-wrapper">
- <!-- Slides -->
- <div class="swiper-slide">Slide 1</div>
- <div class="swiper-slide">Slide 2</div>
- <div class="swiper-slide">Slide 3</div>
- ...
- </div>
- <!-- If we need pagination -->
- <div class="swiper-pagination"></div>
- <!-- If we need navigation buttons -->
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
- <!-- If we need scrollbar -->
- <div class="swiper-scrollbar"></div>
- </div>
设置滑块大小
我们可以为 Swiper 滑块自定义大小, 通过 CSS 实现:
- .swiper-container {
- width: 600px;
- height: 300px;
- }
初始化
最后我们需要调用 Swiper 库初始化滑块, 设置非常方便.
将下面的代码添加到 < body > 末尾:
<body>
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
如果你使用 jQuery 库, 那么上面这段初始化的代码可以放在页面任何位置, 但必须在 document.ready 代码块中调用. 示例代码如下:
- $(document).ready(function () {
- //initialize swiper when document ready
- var mySwiper = new Swiper ('.swiper-container', {
- // Optional parameters
- direction: 'vertical',
- loop: true
- })
- });
或者在 window.onload 方法中调用 (不推荐):
- window.onload = function () {
- //initialize swiper when document ready
- var mySwiper = new Swiper ('.swiper-container', {
- // Optional parameters
- direction: 'vertical',
- loop: true
- })
- };
作为 CommonJs 模块
Swiper 与 CommonJs 模块完全兼容, 可以在类似 Node.js 的环境中使用:
- var Swiper = require('swiper');
- var mySwiper = new Swiper('.swiper-container', { /* ... */ });
作为 ES 模块
Swiper 包附带 ES 模块版本, 可以在支持 ES 的地方使用, 也可以与 Webpack 或 Rollup 等捆绑一起使用:
- import Swiper from 'swiper';
- var mySwiper = new Swiper('.swiper-container', { /* ... */ });
Swiper 的功能确实比较强大, 还有很多高级的配置, 大家可以在 Swiper API 文档 https://www.tutorialdocs.com/tutorial/swiper/api-initialize.html (英文) 中了解. 下面附上 API 文档的章节目录:
来源: https://www.cnblogs.com/zhangyin88/p/9311902.html