简介
ng2-owl-carousel 是一个 Angular 2+ 的轮播组件，它是基于 jQuery 插件 OwlCarousel2 开发的，具有可定制性强、使用方便的特点。
在本文中，我们将深入介绍 ng2-owl-carousel 的使用方法，帮助大家快速掌握它的使用。
安装
在项目中使用 ng2-owl-carousel 首先需要安装它。你可以使用 npm 进行安装，打开终端并运行以下命令：
npm install ng2-owl-carousel --save
使用方法
使用 ng2-owl-carousel 时，首先要在应用模块中导入它，并将其添加到模块的 providers 和 imports 中。打开 app.module.ts，在文件的开头添加以下内容：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- -------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在应用中使用 ng2-owl-carousel 时，需要将它添加到 HTML 模板中。例如：
<owl-carousel [options]="carouselOptions" [items]="carouselItems"></owl-carousel>
在组件的代码中，可以定义 carouselOptions 和 carouselItems 来配置和填充轮播组件。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------- --------------------------- ---------------------------------------
-
--
------ ----- ------------ -
--------------- - -
----- -----
------- ---
---------------- -----
----------- -
-- -
------ --
---- ----
--
---- -
------ --
---- -----
--
----- -
------ --
---- -----
----- -----
-
-
--
------------- - -
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
-
--
-这样就可以快速地使用 ng2-owl-carousel 了。
配置项
ng2-owl-carousel 支持多种配置项来设置轮播组件的行为和样式。以下是一些常用的配置项：
- items：定义轮播组件显示的项数。例如
{ items: 3 }会显示三个项。缺省值为1。 - nav：显示导航箭头。可以设置为
true、false或任意 CSS 选择器。例如{ nav: true }会显示默认的导航箭头，{ nav: '.custom-nav' }会将导航箭头添加到选择器为.custom-nav的元素上。缺省值为false。 - dots：显示分页点。可以设置为
true、false或任意 CSS 选择器。例如{ dots: true }会显示默认的分页点，{ dots: '.custom-dots' }会将分页点添加到选择器为.custom-dots的元素上。缺省值为false。 - loop：开启无限循环。例如
{ loop: true }会循环滚动所有项。缺省值为true。 - autoplay：自动播放轮播组件。例如
{ autoplay: true, autoplayTimeout: 3000 }会每 3000 毫秒自动滚动到下一个项。缺省值为false。 - autoplayHoverPause：停止自动播放轮播组件当鼠标悬停在轮播组件上时。例如
{ autoplay: true, autoplayTimeout: 3000, autoplayHoverPause: true }会使当鼠标悬停在轮播组件上时停止自动播放。缺省值为false。 - responsive：响应式配置，可以根据浏览器窗口大小和设备类型动态调整轮播组件的配置项。
具体更多配置项请参阅 OwlCarousel2 文档。
示例代码
下面是一个完整的示例代码，使用 ng2-owl-carousel 实现图片轮播效果：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------- --------------------------- ---------------------------------------
-
--
------ ----- ------------ -
--------------- - -
----- -----
------- ---
---------------- -----
----------- -
-- -
------ --
---- ----
--
---- -
------ --
---- -----
--
----- -
------ --
---- -----
----- -----
-
-
--
------------- - -
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
--
-
------ ------ ---
--------- ------------------------------------
-
--
-打开浏览器可以看到轮播效果。完整代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1281e8991b448daa7d