可能许多前端开发者在实现轮播效果时使用过 jQuery 插件或自己编写过滑动效果的代码，现在有了更方便实用的解决方案：npm 包 rms-meteor-carousel。rms-meteor-carousel 是一个针对 Meteor 框架的轮播组件，但它同样可以被引入到其它前端项目中。本文主要介绍 rms-meteor-carousel 的使用方法。
安装
在项目目录下使用 npm 安装 rms-meteor-carousel：
npm install rms-meteor-carousel --save
基本使用
在前端代码中引入 rms-meteor-carousel 模块：
import Carousel from 'rms-meteor-carousel';
使用该模块创建一个 Carousel 组件实例，并将其挂载到页面上：
-- -------------------- ---- -------
----- ----- - -
-
------ ------ ---
------------ ------------ --- ----- ---
--------- -------------------------------------------
--
-
------ ------ ---
------------ ------------ --- ----- ---
--------- -------------------------------------------
--
-
------ ------ ---
------------ ------------ --- ----- ---
--------- -------------------------------------------
-
--
----- -------- - --- ----------
--- ----------------------
----- -
-----
-
---
-----------------这里我们将 Carousel 组件挂载到 id 为 carousel-container 的 DOM 元素上，同时传入需要轮播的元素（这里使用 placeholder 图片代替）。执行 mount() 方法后，Carousel 组件将自动渲染并开始轮播。
高级使用
配置项
Carousel 组件的构造函数参数支持以下配置项：
el: String。挂载 Carousel 组件的 DOM 元素选择器。data: Object。用于渲染的数据对象，包括以下属性：items: Array。轮播元素数组，每个元素应包含以下属性：title: String。标题。description: String。描述。imageUrl: String。图片地址。
width: String。轮播内容宽度，默认为'600px'。height: String。轮播内容高度，默认为'400px'。interval: Number。轮播间隔时间，默认为3000毫秒。delay: Number。轮播开始延时时间，默认为0毫秒。autoplay: Boolean。是否自动播放，默认为true。loop: Boolean。是否循环播放，默认为true。navigation: Boolean。是否显示导航，默认为true。pagination: Boolean。是否显示分页器，默认为true。
事件
Carousel 组件支持以下事件：
before-slide: 轮播之前触发。after-slide: 轮播之后触发。
事件可以在组件挂载后通过 on() 方法监听：
carousel.on('before-slide', (event) => {
console.log(event);
});方法
Carousel 组件提供以下方法：
mount(): 挂载 Carousel 组件。unmount(): 卸载 Carousel 组件。goTo(index: Number): 跳转到指定索引处的轮播元素。
示例代码
以下代码可以在一个简单的 HTML 页面中运行：
-- -------------------- ---- -------
--------- -----
----- --------- ----------
------
----- ----------------
-------------------------- ---------------
------- ------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------
-------
------------------- -
------ ------
------- ------
------- ---- -----
-
--------------- -
------ -----
------- -----
----------- ------
-
--------
-------
------
---- ------------------------------
--------
----- ----- - -
-
------ ------ ---
------------ ------------ --- ----- ---
--------- -------------------------------------------
--
-
------ ------ ---
------------ ------------ --- ----- ---
--------- -------------------------------------------
--
-
------ ------ ---
------------ ------------ --- ----- ---
--------- -------------------------------------------
-
--
----- -------- - --- -------------------
--- ----------------------
----- -
-----
-
---
-----------------
---------
-------
-------使用这个示例代码，你可以在自己的项目中使用 rms-meteor-carousel 实现轮播效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a981e8991b448e9a2f