Antes de continuar, solo necesito decir que no estoy avanzado en JS/JQuery, ni en desarrollo, en absoluto, y todavía estoy aprendiendo por mi cuenta. ¡Dicho eso!

Desarrollé una función JS/JQuery que he estado usando para iniciar controles deslizantes de Flickity en mis elementos. Esencialmente, todo lo que se necesita hacer para activar un control deslizante es agregar un par de clases a mi elemento. Esto funciona perfectamente, y lo tengo, por lo que el control deslizante se inicia al cargar y/o al cambiar el tamaño (ejemplo: si se indica 'móvil', 'tableta' o 'escritorio' en las clases). Todos mis controles deslizantes funcionan como deberían.

Recientemente me sumergí en cómo incrustar feeds de Instagram, para esto uso Facebook para Dev. e Instafeed.js . Tengo la parte incrustada funcionando perfectamente. Y para aquellos que no están familiarizados, para iniciar su feed de Instagram con Instafeed.js , se ve así:

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();

El problema que tengo es que, en mi contenedor HTML Instafeed.js (para este ejemplo, usemos: id="instagram-feed" arriba), apliqué mis clases de Flickity al objetivo, excepto que el control deslizante no se inicia en cargar, y solo se inicia si cambio el tamaño de mi ventana. Creo que esto se debe a que mis elementos secundarios ( li ) están en la plantilla Instafeed.js y no directamente en el HTML.

¿Hay un trabajo alrededor de esto? Tengo algunas ideas, como crear elementos de prueba que luego se reemplazan durante la carga, pero no estoy muy seguro de cómo abordar esto.

¡Gracias!