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