ch finde, das sollte unglaublich einfach sein, aber ich habe unglaublich viele Probleme, es zu implementiere

Ich benutze ein Javascript-Plugin, Instafeed, um Instagram-Bilder auf eine Seite zu ziehen - das funktioniert einwandfrei.

achdem die Bilder geladen wurden, möchte ich sie nehmen und in @ einfüge ein Karussell.

Ich habe eine JSFiddle, die zeigt, was passiertHie.

Was im generierten Dokument passieren soll, ist das:

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

Instead, das passiert gerade:

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

Das Karussell wird anscheinend vor oder zur selben Zeit wie Instafeed geladen, sodass es die Bilder im Container nie "sieht" und sie nicht richtig verschachtelt sind und keine Klassen angewendet wurden. Daher hängt es seine Klassen (slick-initialized und slick-slider) an den übergeordneten Container an und formatiert keines der untergeordneten Elemente richtig.

Ich habe versucht, das Instafeed-Skript im Kopf abzulegen und beim Laden des Fensters zu starten. Das macht keinen Unterschied.

Gibt es eine Möglichkeit, das Karussell nur dann laden zu lassen, wenn die Instagram-Fotos geladen wurden? Oder ist dies nicht möglich, ohne Rückrufe usw. in die Plugins selbst zu integrieren? Gibt es eine einfache Möglichkeit, dies zu tun? Jede Hilfe wäre dankbar!