介绍
angular-owl-carousel 是一款支持响应式设计、支持无限滚动、具有灵活配置项的 Angular 轮播图组件。本教程将介绍如何使用 angular-owl-carousel ，以及如何使用其配置项以定制化你的轮播图。
安装
你可以使用 npm 来安装 angular-owl-carousel ：
npm install angular-owl-carousel
使用
为了在你的 Angular 应用程序中使用 angular-owl-carousel ，需要首先导入 AngularOwlCarouselModule ：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------ - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -之后你就可以在你的组件中通过声明一个 owl-carousel 元素来使用 angular-owl-carousel ：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ----------------
--------- -
------------- ----------------------------
---- ------------ ----------- ---- -- ---------------
---- ------- -------- --- ------- -------- --- --
------
---------------
-
--
------ ----- ------------ ---------- ------ -
-------------- ----- - -
-
---- -----------------------------------
---- ------ --
--
-
---- ---------------------------------------
---- ------ --
--
-
---- ------------------------------------
---- ------ --
-
--
---------------- --- - -
----- -----
--------- -----
---------------- -----
------ -
--
---------- --
-配置项
angular-owl-carousel 的全部配置项如下：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| animateIn | string | false | 进入动画 |
| animateOut | string | false | 离开动画 |
| autoplay | boolean | false | 是否自动播放 |
| autoplayHoverPause | boolean | true | 鼠标悬停自动暂停 |
| autoplaySpeed | string/boolean | false | 自动播放速度 |
| center | boolean | false | 是否居中当前项 |
| dots | boolean | true | 是否显示小点 |
| dotsData | boolean | false | 是否从 data-dot 属性中获取小点数据 |
| dotsEach | number/boolean | false | 多个滑块中每个滑块显示的点 |
| dotsSpeed | string/boolean | false | 切换点速度 |
| dotData | boolean | false | 是否从 data-dot 属性中获取点数据 |
| items | number | 3 | 多个滑块之间的滑块数量 |
| itemsDesktop | array/boolean | [1199, 3] | 大屏幕设备每个滑块显示的数量 |
| itemsDesktopSmall | array/boolean | [979, 3] | 中型屏幕设备每个滑块显示的数量 |
| itemsTablet | array/boolean | [768, 2] | 小型平板设备每个滑块显示的数量 |
| itemsTabletSmall | array/boolean | false | 大型手机设备每个滑块显示的数量 |
| itemsMobile | array/boolean | [479, 1] | 小型手机设备每个滑块显示的数量 |
| itemsScaleUp | boolean | false | 是否按比例缩放 |
| lazyLoad | boolean | false | 是否延迟加载 |
| lazyFollow | boolean | true | 是否随着播放延迟加载 |
| lazyEffect | string/boolean | false | 延迟加载的类型 |
| mouseDrag | boolean | true | 鼠标拖动 |
| navigation | boolean | false | 是否显示上一页、下一页按钮 |
| navigationText | array | ['<', '>'] | 上一页、下一页按钮的文本 |
| pagination | boolean | true | 是否显示分页 |
| paginationNumbers | boolean | false | 是否显示分页编号 |
| responsive | boolean | {} | responsive 配置项，包含各种屏幕设备可见滑块的数量 |
| rewindNav | boolean | true | 拖动到边界时，是否重置 |
| rewindSpeed | string/boolean | false | 拖拽时的速度 |
| slideBy | number | 1 | 外部调用的显示数量 |
| slideTransition | string/boolean | false | 转换过渡效果 |
| smartSpeed | string/boolean | false | 智能速度 |
| startPosition | number/boolean | 0 | 开始的位置 |
| touchDrag | boolean | true | 触控拖动 |
| transitionStyle | string/boolean | false | 转换样式 |
| video | boolean | false | 去掉视频 |
| videoHeight | number/boolean | false | 视频高度 |
| videoWidth | number/boolean | false | 视频宽度 |
示例
以下是一个简单的 angular-owl-carousel 示例：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ----------------
--------- -
------------- ----------------------------
---- ------------ ----------- ---- -- ---------------
---- ------- -------- --- ------- -------- --- --
------
---------------
-
--
------ ----- ------------ ---------- ------ -
-------------- ----- - -
-
---- -----------------------------------
---- ------ --
--
-
---- ---------------------------------------
---- ------ --
--
-
---- ------------------------------------
---- ------ --
-
--
---------------- --- - -
----- -----
--------- -----
---------------- -----
------ -
--
---------- --
-结论
在这篇教程中，我们介绍了如何通过 angular-owl-carousel 在 Angular 中快速建立灵活定制的轮播图。我们还介绍了 angular-owl-carousel 中的配置项，并提供了一个实际的示例代码，帮助你理解如何使用该组件。
希望这篇教程对使用 angular-owl-carousel 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1181e8991b448daa66