Flickity Ready Event

[chadhayton]

I've seen a couple issues about this, but no real answer. Shouldn't there be a Flickity event that fires once Flickity is initializaed and completely ready to go? Something similar to jQuery's ready event?

I know that I can define events directly after the Flickity declaration, but I often have tracking events that are added in separate files and adding a ready event would allow for loose coupling of the Javascript.

It might work something like this:

// jQuery
$carousel.on( 'ready.flickity', function() {
  console.log( 'Flickity is ready' )
})
// vanilla JS
flkty.on( 'ready', function() {...})

There might already be something like this, but I didn't see it in the documentation. Any help you can provide would be appreciated.

[desandro]

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

---

Thanks for this feature request. Can you provide an example of why you need an event? After you initialize Flickity, it should be ready to go.

$carousel.flickity(...);
// it's ready

Are you running into race conditioning with initializing Flickity?

[chadhayton]

Thanks for the quick reply. Yes, I am working in a CMS the pulls in the Flickity plugin and then includes a general purpose file for instantiating all Flickity carousels if and when they are included on the page.

All the pages with Flickity on them share the same initialization code:

$('.gallery').flickity({
	wrapAround: true,
	imagesLoaded: true
});

But some pages have different tracking requirements based on client needs, and some galleries have no tracking at all. Frequiently, the tracking functions are housed in a separate file, so I have to be very careful to load that after the Flickity instantiation, and if they are in Javascript tags on page I have the same issue.

For optimization reasons most of our Javascript is included just before the close of the body tag, which means it is very likely that on-page Javascript included in the CMS will appear before the Flickity code gets included causing all the tracking to fail.

If we had a ready event to hook into, it wouldn't matter where these functions were. We could just attach them to the event and more along.

Thanks for your consideration on this feature request. I think it would be a great addition to an already great product.

[desandro]

You can add a ready event for Flickity by adding this code.

var activate = Flickity.prototype.activate;
Flickity.prototype.activate = function() {
  if ( this.isActive ) {
    return;
  }
  activate.apply( this, arguments );
  this.dispatchEvent('ready');
};

---

Given your use case, I wonder if there's a better approach. Perhaps using HTML initialization, and then using Flickity.data() to get the instance afterward.

[HellooooNewman]

Ran into the same need for a ready event as I was dealing with race conditioning. I took the solution from another issue that fixed it.

https://github.com/metafizzy/flickity/issues/205#issuecomment-186943594

I still think that a ready event should be added though.

[koraysels]

yeah definitely add a ready event.. please;

I am calculating the scroll position for page navigation and the initialization of flickity messes with the heights (especcially when adaptiveHeights is set to true)

EDIT: that monkeypatch did not work btw..

[isherwood]

Plus one for this. I'm trying to achieve equal-height slides, and this would be an easy way to set heights after render. I'm also using Flickity in a multi-row arrangement where I'm sliding and fading the rows in. A 'ready' callback would greatly facilitate that.

[lottec]

Plus one for ready event please!

[kierangillen]

Plus another! Would be very helpful.

[evgenyshev]

Plus another!

[liquidvisual]

Yes please!

[desandro]

🎉 Flickity v2.1.0 has been released with all new ready event See docs! 🎉

// jQuery
var $carousel = $('.carousel');
// bind event listener first
$carousel.on( 'ready.flickity', function() {
  console.log('Flickity ready');
});
// initialize Flickity
$carousel.flickity();

// vanilla JS
var flkty = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity ready');
    }
  }
});

I'm now closing this issue. Please open a new issue if you into trouble with using ready. Thanks for all the 👍 over the years 🌈🐻

[vadim-on-github]

There's still a jump after this ready event. Example:

1. Flickity's container's opacity is set to 0 initially in the css.
2. Inside the ready event handler, we have a code to set the opacity of that container to 1.
3. When this event is fired, the container opacity becomes 1, but no flickity is visible. Only after a split second it appears and makes the container grow - thus the jump.

Need something like layoutComplete from Masonry ;) Thanks for the great work!

[benface]

I have the same problem as @vadimdude.

[desandro]

@benface @vadimdude Thanks for reporting. I'll have to take a look.

[faisal-saeed-brainx]

@desandro any update on this issue?

[jonaspraem]

One year later...

[antonyd89]

Two years later...

[aaronstezycki]

I'm also having this issue.

A cause of this issue could be the fact that flickity applies height to the '.flickity-viewport' container. So if don't have an explicit height in the css for the slider (ie. you're letting the contents of the slides set the height), flickity initialises with 0px height on the container and then catches up with itself. This results in either no content or content jumping around as its being loaded.

If you put a slow transition in the css on the height of the container, it exacerbates the problem and you can clearly see height changing on load.

.flickity-viewport {
    transition: height 5s cubic-bezier(0.42, 0.97, 0.52, 1);
}

[inversed]

What I ended up doing to deal with the split second flash was to add a transition-delay of 1 second. It's imprecise and a bit of a kludge but gets me past the issue. So, in my case, I'm transitioning from 0% opacity to 100% in about a second after that initial delay.

I can see the benefits of setting the height initially but with the fairly complex responsive design I'm working with, I imagine that gets tricky to manage.

[desandro]

This original issue 6 years old, and was originally for the creation of the ready event. I think it's fair to separate that from on-going issues. I'm closing this one.

If you find a bug using the ready event, please open a new issue with a reduced test case.