介绍
ng-swiper 是一个 AngularJS 应用程序的 Swift 应用程序。它集成了 Swift 3 中最新出现的 swiper。样式和组件都是 AngularJS 风格的，使它更容易与 AngularJS 应用程序集成。
安装
需要在项目中引用 CSS 和 JavaScript 文件。你可以从 NPM 安装包中获取文件。通过以下命令安装 ng-swiper：
npm install ng-swiper --save
使用
安装完 ng-swiper 后，马上引入它。css 和 js 文件需要放置在你项目的 src 文件夹根目录中。如下：
<link rel="stylesheet" type="text/css" href="node_modules/swiper/dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/ng-swiper/dist/css/ng-swiper.min.css">
<script type="text/javascript" src="node_modules/swiper/dist/js/swiper.min.js"></script>
<script type="text/javascript" src="node_modules/ng-swiper/dist/js/ng-swiper.min.js"></script>现在你就可以在你的应用程序中使用 ng-swiper 了。这里我们先使用一个简单的声明式用法展示 ng-swiper。如下：
-- -------------------- ---- -------
------- -------------------------------- ----- -------------- ------- ----------------------- ---------------
----------------------------------
---- -----------------------
---- -------------------- ---------------- -- --------
---- -- ---
------
------
---- ------------------------- -------------------------
---- -------------------------- -------------------------
---- -------------------------- -------------------------
---------这里假设你已经有一个数组 $scope.slides（有多个div.slide），可以通过下面的控制器逐个调整数据。如下：
myApp.controller('CarouselController',[ '$scope', '$http', function($scope, $http) {
$http.get('https://dev-server.com/carousel').then(function (response) {
$scope.slides = response.data.slides;
}, function (error) {
console.log(error);
});级联式案例代码：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ---------------- --------------- ---------------------------------------------------
----- ---------------- --------------- ---------------------------------------------------------
------- -----------------------------------------------------------------------------
------- ---------------------------------------------------------
------- ---------------------------------------------------------------
-------
----- -----------------------------------
------- -------------------------------- ----- -------------- ------- ----------------------- ---------------
----------------------------------
---- -----------------------
---- -------------------- ---------------- -- --------
---- ------------------------------
---- ---------------- ----------------- ------
------
------
---- ------------------------- -------------------------
---- -------------------------- -------------------------
---- -------------------------- -------------------------
---------
--------
--- ----- - ----------------------- ---------------
-------------------------------------- ---------- -------- -------- -------- ------ -
---------------------------------------------------------- ---------- -
------------- - ---------------------
-- -------- ------- -
-------------------
---
----------------- - -------- -------- -
------------- - -------
--
----
---------
-------
-------ng-swiper 参数
下面是一些适用于 ng-swiper 的主要参数：
- swiper-options：一个对象，其中包含了 swiper 实例配置选项。
- swiper-method：一个字符串或者函数对象来代表执行 swiper API 方法。
- swiper-update：将 swiper-update 的值设置为 true，用于更新 swiper。
- swiper-slide-progress：一个回调函数，该函数在滑块进度发生变化的时候调用。
- swiper-slide-transition-start：一个回调函数，在滑块过渡到下一个滑块之前调用。
- swiper-slide-transition-end：在滑块过渡到下一个滑块速度之后调用的回调函数。
- swiper-pagination-clickable：一个布尔值，用于标志当前 paginatable swiper 是否支持 clickable。
- swiper-on-slide-change-end：当 swiper 切换结束时调用。
结论
现在你已经掌握了如何使用 ng-swiper。它非常实用，且与 AngularJS 风格的应用程序无缝集成。感谢完整的 npm 包 ng-swiper 提供的帮助，它更轻松了我们的 Angular 应用程序开发。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005568d81e8991b448d3551