javascriptjqueryslidercarouselinstafeedjs

Instagram feed + Slick Carousel


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


Solution

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