ng-page-slider 是一个非常方便的 AngularJS 页面滑动组件，它可以用于制作制作各种页面滑动效果，如图片轮播、幻灯片展示等。这个 npm 包操作非常简单，只需要几行代码就可以实现页面滑动效果。
在本文中，我们会详细介绍 ng-page-slider 包的使用方法，包括安装、配置和使用。如果你想快速制作一个漂亮的页面滑动效果，那么继续往下看吧！
安装
要使用 ng-page-slider，需要安装 Node.js 和 npm。如果你还没有安装这两个工具，可以前往 https://nodejs.org/en/ 下载安装包并安装。
打开终端，输入以下命令安装 ng-page-slider：
npm install ng-page-slider --save
安装完成后，你就可以在你的项目中使用 ng-page-slider 了。
配置
在使用 ng-page-slider 之前，需要在你的 AngularJS 应用程序中引入该包并注入到你的应用程序中。你可以像下面这样在 index.html 中引入 ng-page-slider：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
----- ---------------- -----------------------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------------------------------
-------
----- ---------------
---- -------------------------
----------------
-------------------- ------------ -- -------
---- -------------------
----------------------
-----------------
------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
------- ----------------------
-------
-------上面的代码中，我们在 html 的 head 标签中分别引入了 Bootstrap 和 ng-page-slider 的样式表；在 body 标签中，我们创建了一个 AngularJS 应用程序 myApp，并在其中创建了一个名为 mainCtrl 的控制器；在 div 标签中，我们使用了 ng-page-slider 标签，并在其中使用 ng-repeat 指令来循环渲染图片。
上面的配置只是最基本的配置，你可以根据自己的需求来修改和定制。
使用
使用 ng-page-slider 主要有以下几个步骤：
1. 定义数据
在 AngularJS 中，你需要先定义一组数据，然后将数据传递给 ng-page-slider，让它来进行渲染：
angular.module('myApp', ['ng-page-slider']).controller('mainCtrl', function($scope){
$scope.items = [
{src: 'images/image1.jpg'},
{src: 'images/image2.jpg'},
{src: 'images/image3.jpg'},
{src: 'images/image4.jpg'}
];
});上面的代码定义了一个名为 items 的数组，数组中包含了 4 张图片的地址。
2. 渲染数据
渲染数据需要使用 ng-page-slider 标签和 ng-page-slider-item 标签。ng-page-slider 标签包裹了所有的 ng-page-slider-item 标签，每个 ng-page-slider-item 标签表示一个滑动页面。
<ng-page-slider>
<ng-page-slider-item ng-repeat="i in items">
<img ng-src="{{i.src}}">
</ng-page-slider-item>
</ng-page-slider>上面的代码中，我们使用 ng-repeat 指令循环渲染了 items 数组中的每个元素，每个元素都创建了一个 ng-page-slider-item，标签中包含了一个 img 标签，用于展示图片。
3. 自定义样式
最后，你可以通过自定义样式来调整 ng-page-slider 的外观和行为。你可以修改样式来调整滑动页面的大小、背景颜色、文本颜色等等。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
----- ---------------- -----------------------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------------------------------
-------
------
---------------- ------
------ -----
------- ------
--------- ---------
----------- -------
------ ------
-
----- ---
---------- -----
----------- ------
------------ --- --- -----
-
----- -----
---------- -----
------------ --- --- -----
-
--------
-------
----- ---------------
---- -------------------------
----------------
-------------------- ------------ -- -------
---- ------------ ------------------------------------------
--------------------
--------------------------
------
----------------------
-----------------
------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
--------
----------------------- ------------------------------------------ -----------------
------------ - -
------- -------------------- ------ ------ --- -------- ----- -- ----- ----
------- -------------------- ------ ------ --- -------- ----- -- ----- ----
------- -------------------- ------ ------ --- -------- ----- -- ----- ----
------- -------------------- ------ ------ --- -------- ----- -- ----- ---
--
---
---------
-------
-------上面的代码演示了如何使用 ng-page-slider 来创建一个简单的幻灯片效果。点击运行，你可以看到一个页面滑动效果的演示。你可以根据自己的需求来修改和定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d0d81e8991b448daa18