Before I go on, I just need to state that I'm not advanced at JS/JQuery, or development for that matter, at all and I'm still learning on my own. That said!

I have developed a JS/JQuery function that I've been using to initiate Flickity sliders on my elements. Essentially all that needs to be done to trigger a slider is to add a couple classes to my element. This works perfectly, and I have it so the slider is initiated on load, and/or on resize (example: if 'mobile', 'tablet', or 'desktop' is stated in the classes). All of my sliders are workings as they should.

I have recently dived into how to embed Instagram feeds, for this I use Facebook for Dev. and Instafeed.js. I got the embed part working perfectly. And for those who aren't familiar, to initiate your Instagram feed with Instafeed.js, it looks something like this:

HTML

<ul id="instagram-feed"></ul>

JS

var userFeed = new Instafeed({

  get: 'user',
  userId: 'YOUR_ID',
  limit: 8,
  target: 'instagram-feed',
  resolution: 'low_resolution',
  template: '<li><a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></a></li>',
  accessToken: 'YOUR_TOKEN'

}); 
userFeed.run();

The issue I'm having is, in my Instafeed.js HTML container (for this example let's use the: id="instagram-feed" above), I have applied my Flickity classes to the target, except the slider is not initiating on load, and only initiates if I resize my window. I believe this is because my child elements ( li ) are in the Instafeed.js template and not directly in the HTML.

Is there a work around around this? I have a few thoughts, like creating test elements that are then replaced on load, but I'm not really sure how to approach this.

Thank you!