前言
在讲解 bespoke-bullets 的使用教程之前，我们需要先了解一下什么是 npm 包。npm 是 Node.js 的包管理器，而 npm 包则是可以在 Node.js 项目中引用和使用的模块。前端开发中，我们经常会使用 npm 包来解决一些问题。
bespoke-bullets 就是一款非常优秀的 npm 包。它提供了一种创建漂亮幻灯片的途径。本文将介绍如何使用 bespoke-bullets 来优雅地为你的网站添加幻灯片。
什么是 bespoke-bullets
Bespoke-bullets 是用于幻灯片制作的插件，它可以实现幻灯片制作更加简单和灵活。当然，我们也可以通过其他方式来实现幻灯片制作。但是它毕竟是由专业人员编写的包，代码经过深思熟虑，我们可以直接使用此包，也可以通过此包进行修改来实现自己想要的效果。
bespoke-bullets 的安装
如果您已经熟悉了 npm 包的安装，这一步可以跳过。如果您还不熟悉 npm 包的安装，可以看看这篇文章 https://www.runoob.com/nodejs/nodejs-npm.html。
打开命令控制台，输入 npm install bespoke-bullets ，然后回车。你将会看到控制台输出类似这样的信息：
-- -------------------- ---- ------- --- ---- --------- ------- -- ---- ---- -- ---------- ---- ---------------------- --- ---- ------ ------- -- ---- ---- -- ---------- ---- ---------------------- --- ---- ---- -- ----------- --- ---- ---- -- ---------- ------ --- ---- ---- -- ------ ---- --- ---- ---- -- ------- ------ - --------------------- ------- - ------- --- ------- - ------- -- ------ ----- - ---------------
这样就安装好了 bespoke-bullets 。
bespoke-bullets 的使用
创建一个 HTML 文件
首先，在创建我们的幻灯片之前，我们需要先创建一个 HTML 文件。在这个 HTML 文件中，我们将使用 bespoke-bullets 来添加幻灯片。
-- -------------------- ---- -------
--------- -----
------
------
--------- -----------------
----- ----------------
-------
------
---------
--------- ------
----
--------- ------
--------- ------
--------- ------
-----
----------
---------
--------- ------
----
--------- ------
--------- ------
--------- ------
-----
----------
---------
--------- ------
----
--------- ------
--------- ------
--------- ------
-----
----------
------- ----------------------------------------------------
------- --------------------------------------------------------------------
------- --------------------------
-------
-------引入 bespoke-bullets
为了使用 bespoke-bullets ，我们需要在 HTML 文件中引入它。找到上面 HTML 文件中的 script 标签，在这个标签之后，我们需要引入 bespoke-bullets 。代码如下：
<script src="node_modules/bespoke/dist/bespoke.js"></script> <script src="node_modules/bespoke-bullets/dist/bespoke-bullets.js"></script>
加载我们的 slideshow
现在我们来看一下上面 HTML 文件的最后一行代码：
<script src="example.js"></script>
在这个例子中，我们创建了一个 JavaScript 文件 example.js 。在这个文件中，我们将会加载我们的 slideshow，以及一些其他的配置。如果你的 HTML 文件和 JavaScript 文件放在同一个目录下，你可以写成这样：
<script src="./example.js"></script>
接下来，我们需要在 example.js 文件中，创建并加载我们的 slideshow。代码如下：
-- -------------------- ---- -------
--- ------ - -------------------------------------
----------------------- -
-----------------------
--------------------------
-----------------------
------------------------
--------------------------
------------------------
-------------------------
---在这个例子中，我们创建了一个变量 slides ，然后我们使用 bespoke-bullets 加载了我们的 slideshow 。除此之外，我们还配置了其他的一些插件。这些插件可以让我们幻灯片更加漂亮。
如果我们想要添加一些更加靓丽的幻灯片，我们可以修改代码。比如，我们可以添加一些自定义的样式，来让我们的幻灯片更好看。修改代码之前，需要先在 HTML 文件中引入自定义的样式：
<link href="./example.css" rel="stylesheet" type="text/css"/>
然后，我们需要在 example.css 文件中添加一些自定义样式，比如：
.bespoke-bullets li {
color: #ccc;
}
.bespoke-inactive ~ ul li:not(.bespoke-bullet) {
opacity: 0;
}这样我们就可以为我们的幻灯片添加美丽的自定义样式了！
结语
通过本文的介绍，相信读者已经具备了在项目中使用 bespoke-bullets 制作漂亮幻灯片的能力。 通过插件的不断学习，我们能为使我们网站功能更加丰富。在前端开发中，我们需要不断地学习新知识，才能写出更加优秀的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184014