Doesn't work when using with imagesloaded

[ghost]

I'm importing like this with Webpack and fullscreen doesn't work:

import Flickity from 'flickity-imagesloaded';
import 'flickity-fullscreen';

[desandro]

Thanks for reporting this issue. I've found that I was able to resolve this by first importing 'flickity':

import Flickity from 'flickity';
import 'flickity-imagesloaded';
import 'flickity-fullscreen';

// now use imagesLoaded and fullscreen
var flkty = new Flickity( '.carousel', {
  imagesLoaded: true,
  fullscreen: true,
});

Can you try this code to double-check? I'll update the docs afterward.

[ghost]

@desandro Thanks for the swift reply.

Unfortunately that doesn't seem to work as imagesloaded doesn't do it's thing. If I do as per my previous example, imagesloaded works, but fullscreen doesn't. I've tried pretty much every permutation.

[ghost]

@desandro As aside, I'm using imagesloaded as it seems to fix an issue when using Turbolinks in Rails. The problem being that when you come to the page from a back button click and I create the Flickity instances, they don't render properly.

As a temporary workaround, after I've created the instance, I do the following to re-render flickity when the first image has loaded:

el.querySelector('img').addEventListener('load', function() {
  slider.resize();
});

[desandro]

Okay, I'll take another look at this.

[jacobarriola]

@desandro FWIW it works as expected for me, although I'm using the lazyload and as-nav-for packages, not imagesLoaded.

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

const createProjectCarousel = (element) => {
  if (!element) return

  const projectCarousel = new Flickity(element, {
    pageDots: false,
    lazyLoad: 2,
    fullscreen: true,
    cellSelector: '.project-cell',
    wrapAround: true
  })
}

[BrendanBerkley]

Was there a concrete solve for this? Been trying similar things and have been unable to get it working. (Can try to put an example together next week if necessary)