Попытка отобразить изображения Instagram в карусели - как загрузить карусель только после завершения загрузки изображений?

Я чувствую, что это должно быть невероятно просто, но у меня невероятное количество проблем с его реализацией.

Я использую плагин Javascript,Instafeed, чтобы вытащить изображения Instagram на страницу - это работает нормально.

После загрузки изображений я хочу взять их и поместить вкарусель.

У меня есть JSFiddle, показывающий, что происходитВот.

Что должно произойти в сгенерированном документе, это:

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

Вместо этого это происходит:

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

По сути, карусель, кажется, загружается до или одновременно с Instafeed, и поэтому она никогда не «видит» изображения внутри контейнера, и в итоге они не вкладываются должным образом и не применяют классы. Поэтому он добавляет свои классы (slick-initialized и slick-slider) к родительскому контейнеру и неправильно форматирует ни одного из дочерних элементов.

Я попытался поместить скрипт Instafeed в голову и запустить его при загрузке окна. Это не имеет значения.

Есть ли способ заставить карусель загружаться только после загрузки фотографий из Instagram? Или это невозможно без встраивания обратных вызовов и так далее в сами плагины? Есть ли простой способ сделать это? Любая помощь будет оценена!

Ответы на вопрос(2)

Ваш ответ на вопрос