metafizzy / flickity-as-nav-for Goto Github PK

good evening,
I have encountered the issue with asNavFor function.
Main pic changes while scrolling on nav pictures without clicking on any pictures.

In addition to above, when clicking on flickity-prev-next-button and scrolling, main picture sometime stops at half.(half of previous picture and half of next picture are displayed)

please advise the solution.
thanks in advance.

I'm using the asNavFor function in Flickity to create a placeholder gallery underneath the main gallery. This works pretty well, but when you drag the gallery the movements aren't synced realtime (only when you let go).

Is it possible to mimic the exact movements of the main gallery?

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:

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.

i'm using flickity as the instructions, but got this error warning in the console
anybody know how to solve this?

draggable: false disables the "Clicking the nav gallery will select the content gallery".

Good morning from Berlin!

Yesterday I tried out the asNavFor functionality and noticed that the flickity-prev-next buttons on the navigation slider don't have any effect on the main slider. Is this intended behaviour? Intuitively I thought it should always select the same item in the main slider as in the navigation slider.

hello, please help im keep getting this error
Uncaught TypeError: Cannot read properties of undefined (reading 'create')

<script src="https://unpkg.com/flickity-as-nav-for@3/as-nav-for.js"></script> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

`<script>
$(function() {
$('.__main-preview').removeClass('d-none').flickity({
pageDots: false,
prevNextButtons: false,
draggable: false,
});

        $('.__carousel-preview').removeClass('d-none').flickity({
            asNavFor: '.__main-preview',
            contain: true,
            pageDots: false,
            prevNextButtons: false,
            draggable: '>4',
            cellAlign: 'left',
        });
    })
</script>`

This is the render result

Is there an option to set the asNavFor-carousel run 1 slide behind te main-carousel?

I want to accomplish something like this: see my gif. Only here the slides show image 1 and 1, I want it to show 1 and 2 (then 2 and 3) ...

In the image there is visually only 1 slider. (In code: the big image is the main-carousel and the small image is the asNavFor) But If there is a feature to set the AsNavFor 1 behind the main slider I can make it feel like the small image is the next slide in the carousel.

(I hope this makes sense, this is my stackoverflow)

Hi there.
Is there any solution when using flickity-as-nav-for for SSR projects like NextJS?

Version 2.0.2 (at 82a0dba) doesn't seem to have ever been published to the npm registry: https://www.npmjs.com/package/flickity-as-nav-for?activeTab=versions

This version included a more comprehensive fix for the issue pull request #8 aimed to resolve. Could this version be published so that it can be referenced normally as a dependency with a version number instead of a GitHub URL with a commit-ish suffix?

I have two flickities, both have wrapAround: true, but the other one which moves automatically is rewinding at the end instead of continuing. Here's modified version of your asNavFor demo.

Hello im testing the mini carousel here
https://codepen.io/desandro/pen/wByaqj

but the 9th and 10th slide wont show properly, it is also happen when i used it in my own project