Instagram feed + Slick Carousel

Question

Im trying to run Instafeed with Slick Slider. Instafeed is working well, loading the instagram images, but doesn't output the images on Slick Slider.

Something is wrong on JS:

JS:

$(document).ready(function () {
  $('.instagram_feed').slick({
    dots: false,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    arrows: true,
    adaptiveHeight: true,
    autoplay: true,
    responsive: [{
        breakpoint: 700,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      }
    ]
  });
});

$.ajax({
  type: 'get',
  dataType: 'json',
  url: 'https://ig.instant-tokens.com/users/c9f71acf-40dc-4ce8-bfba-ac7d782a9315/instagram/17841415198859292/token?userSecret=1bwmzhdbracm01k4ba84g8',

  success: function (response) {
    var feed = new Instafeed({
      target: 'instafeed',
      accessToken: response.Token, // Access token from json response
      template: '<div><a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></div></div>',
    });
    feed.run();
  },
});

Codepen: https://codepen.io/adrianovarlotta/pen/JjWBRbz

But Instagram refuses to show images on Codepen so you can see the live website, at bottom of page on the Instagram images here

Answer 1

The slick() call is triggering before the Instafeed finishes rendering the images. Try moving it to the after method in the Instafeed constructor. Like so:

$.ajax({
    type: 'get',
    dataType: 'json',
    url: 'https://ig.instant-tokens.com/users/c9f71acf-40dc-4ce8-bfba-ac7d782a9315/instagram/17841415198859292/token?userSecret=1bwmzhdbracm01k4ba84g8',

    success: function(response) {
        var feed = new Instafeed({
            target: 'instafeed',
            accessToken: response.Token, // Access token from json response
            template: '<div><a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></div></div>',
            after: function() {
                $('.instagram_feed').slick({
                    dots: false,
                    infinite: true,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    arrows: true,
                    adaptiveHeight: true,
                    autoplay: true,
                    responsive: [{
                            breakpoint: 700,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                            }
                        },
                        {
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        }
                    ]
                });
            }
        });
        feed.run();
    },
});

Per the Instafeed documentation:

after: A callback function called when images have been added to the page.