Eu sinto que isso deve ser incrivelmente simples, mas estou tendo quantidades inacreditáveis de problemas para implementá-lo.

Eu estou usando um plugin Javascript,Instafeed, para inserir imagens do Instagram em uma página - isso está funcionando bem.

Após o carregamento das imagens, quero levá-las e colocá-las emum carrossel.

Eu tenho um JSFiddle mostrando o que está acontecendoaqui.

O que deveria estar acontecendo no documento gerado é o seguinte:

<div id="instafeed" class="instafeed slick-initialized slick-slider">
  <div class="slick-list draggable" tabindex="0">
   <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
      <div class="slick-slide">IMAGE IN HERE</div>
      <div class="slick-slide">IMAGE IN HERE</div>
      <div class="slick-slide">IMAGE IN HERE</div>
   </div>
  </div>
</div>

Em vez disso, isso está acontecendo:

<div id="instafeed" class="instafeed slick-initialized slick-slider">
   <div class="slick-list draggable" tabindex="0">
      <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"></div>
   </div>
   <div>IMAGE IN HERE</div>
   <div>IMAGE IN HERE</div>
   <div>IMAGE IN HERE</div>
</div>

Essencialmente, o carrossel parece estar carregando antes ou ao mesmo tempo que o Instafeed e, portanto, nunca 'vê' as imagens dentro do contêiner e elas acabam não aninhadas corretamente e não têm classes aplicadas. Portanto, ele anexa suas classes (slick-initialized e slick-slider) ao contêiner pai e não formata nenhum dos filhos corretamente.

Tentei colocar o script Instafeed na cabeça e iniciá-lo no carregamento da janela. Isso não faz diferença.

Existe uma maneira de fazer o carrossel carregar apenas quando as fotos do Instagram forem carregadas? Ou isso não é possível sem a criação de retornos de chamada, etc. nos próprios plugins? Existe uma maneira simples de fazer isso? Qualquer ajuda seria apreciada!