介绍
angular2-useful-swiper 是一个用于 Angular2+ 的轻量级、易用的Swiper 轮播图组件库。它可以帮助开发者快速实现轮播图功能的需求。 在本文中，我们将介绍如何在您的 Angular 项目中使用 angular2-useful-swiper 包。
安装与引入
使用npm安装angular2-useful-swiper：
npm install angular2-useful-swiper --save
成功安装后，在您的 Angular 项目的“app.module.ts”文件中将引入模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ------------------------- ----------- -------- - -------------- ------------ -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用swiper组件
安装好并引入angular2-useful-swiper后，就可以开始使用Swiper了。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
--------
---- -----------------------
---- ------------- --------------------------
---- ------------- --------------------------
---- ------------- --------------------------
------
---- ---------------------------------
---- ---------------------------------
---------
-
--
------ ----- ------------ - -你需要在你要展示轮播图的区域包含swiper 组件。其中，这里的 swiper-wrapper（必选）和 swiper-slide（必选）是swiper 默认的类名，用于其初始化和生效。swiper-button-prev 和 swiper-button-next 是swiper 的默认播放按钮，可针对性的更改类名以定制化样式。在加载了这个简单的Swiper 组件之后，你会得到一个默认的 Swiper 轮播图显示出来的效果。
配置 swiper 组件
angular2-useful-swiper 提供了一系列的 Swiper 配置项，具体使用方式为：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ---------------- --------------------- - ---- -------------------------
------------
--------- ---------
--------- -
------- ------------------
---- -----------------------
----- ------------- --------------------------
----- ------------- --------------------------
----- ------------- --------------------------
------
---- ---------------------------------
---- ---------------------------------
---------
-
--
------ ----- ------------ -
------ ------- --------------------- - -
---------- -------------
-------------- --
---------------- ----
--
-在上面的代码中，我们增加了一个 config 对象，并把它和 swiper 组件关联。config 对象是 SwiperConfigInterface 类型，用于传递 Swiper 配置。你可以根据你的需要调整其中的属性值。该 config 是可选的，你可以只用默认配置来生成一个轮播图。swiper 配置项的常用属性如下：
direction- 切换方向，可选值为horizontal(水平)和vertical(垂直)默认值为horizontal;slidesPerView- 视图中可以显示多少张幻灯片，可选值为数字或者自auto。默认值为 1 。spaceBetween- 幻灯片之间的距离。默认值是 0 .keyboardControl- 开启键盘控制。默认值为false。
高级自定义
在完成 swiper 的基本配置后，你可能想要对轮播图进行一些自定义或优化。angular2-useful-swiper 提供了大量的事件和方法，让开发者更加灵活的控制 Swiper 实例。例子如下：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ -
---------------- ---------------- ----------------------
------------------------- --------------------------
------------------------
- ---- -------------------------
------------
--------- ---------
--------- -
------- ----------------- --------------------------------
---- -----------------------
- ---- ------------- --------------------------
- ---- ------------- --------------------------
- ---- ------------- --------------------------
------
---- ------------------------ -------------------------------------------
---- -------------------------- ---------------------------------------------
---- -------------------------- ---------------------------------------------
---- ------------------------- ---------------------------------------------
---------
-
--
------ ----- ------------ -
------ ------- --------------------- - -
---------- --------------------
---------- -------------
-------------- --
---------------- -----
----------- ----------------------
----------- ----------------------
----------- --------------------
--
--------------------------- -------------- ----------------
--------------------------- -------------- ----------------
------ ---------- ------------------------ - -
--- --------------------
---------- ----
--
------ ----------- ------------------------- - -
--- ---------------------
---------- ----
--
------ ---------------- ---- -
------------------- - - -------------------------------
-
-在这段代码中，我们增加了 3 个接口： SwiperScrollbarInterface, SwiperPaginationInterface, 和 SwiperComponentInterface.
SwiperScrollbarInterface 和 SwiperPaginationInterface 都是与 Swiper 中的滚动条和分页有关的，用于自定义滚动条和分页的样式，以及控制它们的行为。
SwiperComponentInterface 是用于直接控制 Swiper 对象的，开发者可以在程序代码中直接通过 componentRef 或 directiveRef 属性获得。componentRef 对象是 SwiperComponent 的实例，开发者可以使用该实例直接访问当前 swiperInstance 对象。同时，SwiperDirective 也提供了许多方法，如 setIndex , getIndex, isEnd, isBeginning等等，这些方法可以让你完成对轮播图更为准确的控制。
总结
Swiper 轮播图插件是开发人员在Web项目中经常用到的插件之一。使用 angular2-useful-swiper，开发人员可以轻松地实现各种类型的轮播图效果，同时也可以灵活的进行配置和自定义，更好的应用于项目中，提高应用体验。 随着本文的介绍，你已经可以很好的了解基本的Swiper应用，鼓励不断尝试、完善和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108723