Swiper - 是免费且最现代的移动触摸滑块，具有硬件加速转换和惊人的本机行为。它旨在用于移动网站，移动网络应用程序和移动原生/混合应用程序。主要为iOS设计，但也适用于最新的Android，Windows Phone 8和现代桌面浏览器
Swiper不兼容所有平台，它是一款现代触控滑块，仅专注于现代应用/平台，带来最佳体验和简单性。
Swiper以及其他优秀组件是Framework7的一部分- 用于构建iOS和Android应用程序的全功能框架。Swiper也是Ionic Framework中的默认滑块组件
Swiper入门
1A。下载并安装Swiper
首先，我们需要下载所需的Swiper文件：
- 我们可以从Swiper GitHub仓库下载它们
- 或者我们可以通过鲍尔安装它们，输入终端：
$ bower install swiper - 或者，使用Atmosphere作为流星包：
$ meteor add nolimits4web:swiper - 或者，使用NPM
$ npm install swiper
在下载/安装的软件包中，我们需要文件dist/夹中的文件。
1B。从CDN使用Swiper
如果你不想在你的项目中包含Swiper文件，你可以使用它从Swiper上cdnjs。以下文件可用：
<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>2.将Swiper文件包含到网站/应用程序中
之后，我们需要将Swiper的CSS和JS文件包含到我们的网站/应用程序中。在你的html文件中：
<!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>3.添加Swiper HTML布局
现在，我们需要将Swiper布局添加到我们的应用中：
<!-- 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>4. Swiper CSS样式/大小
之后，我们可能需要在CSS文件中设置Swiper大小：
.swiper-container { width: 600px; height: 300px; }5.初始化Swiper
最后，我们需要在JS中初始化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 / Zepto，那么你可以在你的任何JS文件中初始化它，但要确保你在
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模块版本，可以在支持或Webpack或Rollup等捆绑软件的情况下使用：
import Swiper from 'swiper'; var mySwiper = new Swiper('.swiper-container', { /* ... */ });babel-loader和Dom7的Webpack配置示例：
module: { rules: [ { test: /\.js$/, // Check for all js files exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, loader: 'babel-loader' } ] } 接下来是什么？
如您所见，将Swiper集成到您的网站或应用程序非常简单。所以这是你的下一个步骤：
- 访问API文档以了解更多关于所有Swiper API以及如何控制它的信息。
- 看看可用的演示。
- 如果您有关于Swiper的问题，请随时在我们的论坛中提问。如果你更喜欢StackOverflow，那么别忘了用
swiper标签标记你的问题。 - 如果发现错误，请在GitHub上创建问题。