flickity react asNavFor for two navs not working

Question

i am using react-flickity-component and want to connect two carousels, i am using asNavFor in options but its not working. here's code sandbox for what i tried. i have also included a package named flickity-as-nav-for (you can see in sandbox)

my findings

this is the code i already tried

  <Flickity
    id="main-flickity"
    className="carousel carousel-main"
    elementType={"section"}
    options={flickityOptions}
    // disableImagesLoaded={false}
  >
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
  </Flickity>

  <Flickity
    className={"custom-images-carousel"}
    elementType={"section"}
    options={testimonialFlickityOptions}
    disableImagesLoaded={false}
  >
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
    <div class="carousel-cell" />
  </Flickity>

Answer 1

You'll need to import 'flickity-as-nav-for', then use class selector on the asNavFor props. id doesn't seem to be a correct props for Flickity component.

import 'flickity-as-nav-for';

const testimonialFlickityOptions = {
  wrapAround: true,
  asNavFor: ".carousel.carousel-main",
  contain: true,
  pageDots: false
};