javascriptecmascript-6slideres6-modulesflickity

How do I add two Flickity addons at the same time?


I've been using Flickity Background Lazyload to add lazyloading functionality to my sliders, and now would like to use Flickity asNavFor as well. Normally, I would import Flickity from the library directly (instead of from the Flickity library), like this:

import Flickity from 'flickity-bg-lazyload'

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

My problem now, is I have to do the same with asNavFor. At the moment it seems to be working with asNavFor added as an extra library, sort of like a CDN, but not directly imported in the file where I need it, but I would rather import both variants of Flickity together and use it in the file.

Is this possible?


Solution

  • The comment from secan definitely helped. Since I can't mark the comment as the answer, I'll answer it myself, for future reference.

    Have you checked the Flickity documentation at flickity.metafizzy.co/options.html#asnavfor and flickity.metafizzy.co/extras.html#module-loaders? I think it covers your case.

    The solution is as follows:

    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"
    })