前言
flickity-as-nav-for 是一款基于 flickity 的 npm 包，用于实现一个轮播图作为另一个轮播图的导航。
安装
首先需要在项目中安装 flickity：
npm install flickity --save
接下来，再安装 flickity-as-nav-for：
npm install flickity-as-nav-for --save
使用
导入
在使用之前，需要先将 flickity-as-nav-for 倒入项目中：
var Flickity = require('flickity'); var flickityAsNavFor = require('flickity-as-nav-for'); Flickity.prototype.asNavFor = flickityAsNavFor;
HTML
下面是一个简单的 HTML 示例，在这个示例中，左侧的轮播图将右侧作为导航。
-- -------------------- ---- ------- ---- ---- --- ---- --------------------- ---- ---------------------------- ---- ---------------------------- ---- ---------------------------- ---- ---------------------------- ------ ---- ----- --- ---- -------------------- ---- ---------------------------- ---- ---------------------------- ---- ---------------------------- ---- ---------------------------- ------展开代码
JavaScript
-- -------------------- ---- ------- --- ---------- - --- ------------------------- - ----------- ----- --- --- --------- - --- ------------------------ - --------- ---------------- -------- ----- --------- ------ --- ----------------------- ---------- - ------------------------------------------------------------ ---展开代码
指导意义
flickity-as-nav-for 可以让我们方便地实现一个轮播图的导航功能。在一些需要展示多组数据的场景中，可以通过这种方式提高用户的使用体验。
例如，在一个电商的商品详情页面，我们需要展示多张商品图片，并提供导航功能，让用户可以快速切换到感兴趣的图片。在这种情况下，我们可以使用 flickity-as-nav-for 来实现这个功能。
示例代码
下面是一个完整的示例代码，供参考。
HTML
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------------- ---------- ----- ---------------- ----- --------------- ---------------------------- ----------------- ----- ---------------- ------------------------------------------------------------------------------ ------- ------ ----------------------- ------- ---- ---- --- ---- --------------------- ---- -------------------------- ------------------------------------------------------ ---- -------------------------- ------------------------------------------------------ ---- -------------------------- ------------------------------------------------------ ---- -------------------------- ------------------------------------------------------ ------ ---- ----- --- ---- -------------------- ---- -------------------------- ------------------------------------------------------ ---- -------------------------- ------------------------------------------------------ ---- -------------------------- ------------------------------------------------------ ---- -------------------------- ------------------------------------------------------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------------ ------- ----------------------------------------------------------------------------------------------------------- -------- --- -------- - -------------------- --- ---------------- - ------------------------------- --------------------------- - ----------------- --- ---------- - --- ------------------------- - ----------- ----- --- --- --------- - --- ------------------------ - --------- ---------------- -------- ----- --------- ------ --- ----------------------- ---------- - ------------------------------------------------------------ --- --------- ------- -------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd619bb4e78292a6fb8b4
