简介
section-horizontal 是一个用于在网页上创建水平滚动的组件的 npm 包。它可以让你在网页上以类似于 PowerPoint 的方式创建并播放横向的节选段落，同时提供多种设置来方便你进行定制化。
安装
你可以通过 npm 安装 section-horizontal：
npm install --save section-horizontal
在你的项目代码中引入 section-horizontal：
import SectionHorizontal from 'section-horizontal';
使用
接下来我们来详细了解如何使用 section-horizontal。
HTML 结构
首先需要设置 HTML 结构，在你想要显示 section-horizontal 的地方放置一个块级元素（比如 div），给它一个 id：
<div id="my-section"></div>
初始化
在 JavaScript 中我们需要调用 SectionHorizontal 构造函数，传入相关配置和 DOM 元素的 id：
let mySection = new SectionHorizontal('#my-section', {
// 配置项
});节点设置
我们可以通过调用 addSection 方法在 section-horizontal 中添加每个节点。
-- -------------------- ---- ------- ---------------------- ------ ------ -------- ----- ------------------- --- ---------------------- ------ ------ -------- ----- ------------------- --- -- ---
节点有两个属性：title 和 content。title 是这个节点的标题，content 是这个节点里要展示的内容。这个内容可以是 HTML 字符串或者是一个 DOM 元素。
定制样式
section-horizontal 节点有默认样式，你可以通过传入一些配置项重新修改它的样式：
-- -------------------- ---- -------
--- --------- - --- -------------------------------- -
-- ---
----------- -
------------------- -------
--
--------- -
------------ ------
--
----------- -
-------- ------
--------- -- ----
-
---配置对象里的三个属性分别对应节点、标题和内容的 CSS 样式。
设置何时自动播放
section-horizontal 可以设置何时自动播放，也就是说当页面加载时自动开始播放。
let mySection = new SectionHorizontal('#my-section', {
// 配置项
autoplay: true // 是否自动播放
});方法
section-horizontal 有一些方法可以帮助你控制滚动的进度：
next：播放下一节节点prev：播放上一节节点goTo：播放指定节点
示例代码：
// 下一节 mySection.next(); // 上一节 mySection.prev(); // 播放第三节 mySection.goTo(2);
示例代码
下面是一个使用 section-horizontal 的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------- ----------
-------
----------- -
------ -----
------- ------
-
--------
-------
------
---- ----------------------
------- -------------------------------------------------------------------------------
--------
--- --------- - --- -------------------------------- -
----------- -
------------------- -------
--
--------- -
------------ ------
--
----------- -
-------- ------
--------- -- ----
--
--------- ----
---
----------------------
------ ------
-------- ----- -------------------
---
----------------------
------ ------
-------- ----- -------------------
---
----------------------
------ ------
-------- ----- -------------------
---
-----------------
---------
-------
-------总结
section-horizontal 是一个方便且易于定制化的横向滚动组件，它可以帮助你快速构建横向滚动的节选段落，并提供多种方法来帮助你控制这些节点的播放进度。同时，它易于安装和使用，非常适合在 Web 开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab481e8991b448d84ea