Siento que esto debería ser increíblemente simple, pero estoy teniendo una cantidad increíble de problemas para implementarlo.

Estoy usando un complemento de Javascript,Instafeed, para extraer imágenes de Instagram en una página, esto está funcionando bien.

Después de cargar las imágenes, quiero tomarlas y ponerlas enun carrusel.

Tengo un JSFiddle que muestra lo que está sucediendo.aquí.

Lo que debería estar sucediendo en el documento generado es esto:

<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>

En cambio, esto está sucediendo:

<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>

Esencialmente, el carrusel parece estar cargando antes o al mismo tiempo que Instafeed, por lo que nunca 've' las imágenes dentro del contenedor y terminan no anidadas correctamente y no se aplican las clases. Por lo tanto, agrega sus clases (slick-initialized y slick-slider) al contenedor principal y no formatea a ninguno de los hijos correctamente.

He intentado colocar el script Instafeed en la cabeza y comenzarlo en la carga de la ventana. Esto no hace la diferencia.

¿Hay alguna manera de que el carrusel solo se cargue cuando se hayan cargado las fotos de Instagram? ¿O no es esto posible sin incorporar devoluciones de llamada, etcétera, en los propios complementos? ¿Hay una manera simple de hacer esto? ¡Cualquier ayuda sería apreciada!