如何同时添加两个 Flickity 插件？答案

【问题标题】：How do I add two Flickity addons at the same time?如何同时添加两个 Flickity 插件？
【发布时间】：2021-01-11 11:32:58
【问题描述】：

我一直在使用Flickity Background Lazyload 为我的滑块添加延迟加载功能，现在也想使用Flickity asNavFor。通常，我会直接从库中导入 Flickity（而不是从 Flickity 库中），如下所示：

import Flickity from 'flickity-bg-lazyload'

const flkty = new Flickity('.element', {
    "prevNextButtons": false,
    "adaptiveHeight": true
})

我现在的问题是我必须对 asNavFor 做同样的事情。目前它似乎正在使用 asNavFor 作为一个额外的库添加，有点像 CDN，但不是直接导入到我需要它的文件中，但我宁愿将 Flickity 的两个变体一起导入并在文件中使用它.

这可能吗？

【问题讨论】：

我不知道 Flickty 库，但您应该能够简单地实例化同一类的另一个对象：const flktyNav = new Flickity('controller-selector', { asNavFor: 'controlled-element-selector' });
我想把它放在同一个变量中。差不多就是这样：import Flickity from 'flickity-bg-lazyload'; import Flickity from 'flickity-as-nav-for'; const flkty = new Flickity('.element', { "prevNextButtons": false, "adaptiveHeight": true });
您查看过flickity.metafizzy.co/options.html#asnavfor 和flickity.metafizzy.co/extras.html#module-loaders 的Flickity 文档吗？我认为它涵盖了你的情况。

标签： javascript ecmascript-6 slider es6-modules flickity

【解决方案1】：

secan 的评论绝对有帮助。由于无法将评论标记为答案，所以我会自己回答，以备日后参考。

您是否查看过 Flickity 文档，网址为 flickity.metafizzy.co/options.html#asnavfor 和 flickity.metafizzy.co/extras.html#module-loaders？我认为它涵盖你的情况。

解决方法如下：

import Flickity from 'flickity'
import 'flickity-bg-lazyload'
import 'flickity-as-nav-for'

const flkty = new Flickity('.element', {
    "prevNextButtons": false,
    "adaptiveHeight": true,
    "asNavFor": ".other_carousel"
})

【讨论】：