npm 包 swively 使用教程

简介

Swively 是一个能让你在页面上快速生成 360 度旋转的图片的 npm 包。使用 swively 可以方便、快捷地创建这样的交互效果，提高网页设计的美感和吸引力。

安装

安装 swively，需要先安装 node.js，然后在终端中输入以下命令：

npm install swively

使用

使用 swively 只需要一个容器和一张图片。以下是一个基本的使用教程，可以让你简单地实现旋转图片的效果。

DOM

首先，我们需要在页面上创建一个容器，并赋予它一个 id，方便之后操作。

<div id="swively-container"></div>

CSS

接下来，我们需要对容器进行一下样式设置，使之具有宽度和高度，且图片不会超出容器。

#swively-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

JS

最后，我们需要在 js 中引入 swively 包，加载一张图片，并使用 swively 相关的方法实现图片的旋转效果。

-- -------------------- ---- -------
------ ------- ---- ----------

----- --------- - ---------------------------------------------
----- ----- - --- --------

------------ - ---------- -
  ----- ------- - --- ------------------ ------ -
    ------------- --- -- ----
    ----- ------------ -- ----
    --------------- ---------- -
      -------------------- -- ---------
    -
  ---

  ----------------
-

--------- - ------------------

这里，我们引入了 swively 包，并创建了一个 Swively 类的实例，将容器、图片、以及相关配置项传入。

我们设定图片数量为 36，路径为 /img/360/，并在 loadedCallback 回调函数中输出信息。

最后调用 swively.start() 方法，就可以让图片开始旋转。

配置项

使用 swively，可以通过配置项来实现更加丰富的效果。

以下是 swively 配置项的详细说明：

其余的配置项参考官方文档。

总结

通过本文，我们学习了 npm 包 swively 的使用方法，其中包括安装、使用 DOM、CSS 和 JS 三个步骤，以及配置项的详细说明。希望通过这篇文章，读者可以更好地掌握 swively，为网站设计带来更加丰富的效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668edd9381d61a3540cb4