metafizzy / flickity-as-nav-for

Enable asNavFor for Flickity
30 stars 13 forks source link

Uncaught TypeError: Cannot read property '0' of undefined when used for nav companion hidden by watchCSS #9

Open vittorius opened 4 years ago

vittorius commented 4 years ago

Hello!

I have 2 sliders with the following setup:

    <div
      class="cover-slider"
      data-flickity='{ "asNavFor": "#featured_banners_body_slider", "fade": true, "draggable": false, "imagesLoaded": true, "pageDots": false, "prevNextButtons": false, "wrapAround": true, "setGallerySize": false, "accessibility": false, "watchCSS": true }'
    >
      <img
        class="featured_banner slide"
        src="60yuz98zo4_Flickery_Box.png"
        aria-hidden="true"
        style=""
      /><img
        class="featured_banner slide"
        src="4zdg7w9it0_Slide_2.png"
        aria-hidden="true"
        style=""
      />
    </div>

    <div
      id="featured_banners_body_slider"
      class="banner-body-slider card-body flickity-soft-edges flickity-soft-edges-white flickity-buttons-adjacent flickity-buttons-bottom-center"
      data-flickity='{"pageDots": false, "wrapAround": true, "watchCSS": true}'
    >
      <div
        id="featured_banner_33"
        class="featured_banner slide"
        aria-hidden="true"
        style=""
      >
        <em class="tagline">New documentary</em>
        <h3 class="heading">Enmity</h3>
        <div class="description">
          <p>
            Then war broke out in heaven. Michael and his angels fought against
            the dragon, and the dragon and his angels fought back. But he was
            not strong enough, and they lost their place in heaven.
          </p>
        </div>
        <a
          href="https://www.youtube.com/watch?v=VtjMGchgrqs"
          class="btn_watch_now btn-watch-now"
          data-fancybox=""
        >
          Watch Now
        </a>
      </div>
      <div
        id="featured_banner_34"
        class="featured_banner slide"
        aria-hidden="true"
        style=""
      >
        <em class="tagline">Old mockumentary</em>
        <h3 class="heading">The Day After</h3>
        <div class="description">
          <p>
            In an age where deceptions run loose and relativism is thriving, it
            is essential to stand tall as a light shining God’s unadulterated
            truth to the world.
          </p>
        </div>
        <a
          href="https://www.youtube.com/watch?v=7-wAzlqzXH0"
          class="btn_watch_now btn-watch-now"
          data-fancybox=""
        >
          Watch Now
        </a>
      </div>
    </div>

Both of them are hidden by setting content: '' upon a CSS breakpoint as described in the watchCSS manual.

When the page is being open with a viewport width already beyond that breakpoint, I get the following console error:

image

It doesn't hurt much and doesn't break anything within the sliders when they become enabled again, but I guess it's easy to fix.

sadeghbarati commented 3 years ago

watchCSS and asNavFor not compatible with each other I guess

spburden commented 1 year ago

@desandro any fix for this yet? watchCSS and asNavFor not compatible with each other.

taylinlarge commented 1 year ago

Does anyone have a work around for this issue?