I'm trying to create a carousel slider with instagram feed using jquery.instagramFeed.js with slick.js.
On codepen I inserted the instagram feed and the slick slider below to see if the slick is working.
Codepen: https://codepen.io/adrianovarlotta/pen/XWKNBqg
I changed some codes on instagram feed js, adding on line 132:
html += "<section class='regular slider instagram_gallery'>";
and closing that section on line 173:
html += "</section>";
Trying to make work the slick slider on instagram feed without sucess.
How about using the instagramFeed.js callback option to run a function which returns the instagram user data object which you can use to build a slick slider.
The returned instagramFeed data object is pretty heavy but see my demo below, which uses the returned data object and loops through all the users media items, builds a custom slides object and stops at the media count value, here is the custom object we've made...
The max slides you can ever get for a user is 12, and for tags is 72.
{
B27UTWZDlZY: {
150: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/s150x150/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&tp=16&oh=4547a183de107937cd4fc8829cb28ff6&oe=5F96F63E",
240: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/s240x240/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&tp=16&oh=307c0ce577bbeea2fb9ee4bbb898097a&oe=5F96C138",
320: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/s320x320/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&tp=16&oh=9f90ae2b01ff38419e23ee07ef3c2a02&oe=5F96874E",
480: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&oh=33ec0085b8863af3ffda4bd1a59c809e&oe=5F970099",
640: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&oh=33ec0085b8863af3ffda4bd1a59c809e&oe=5F970099"
},
BvzWaX8hg50: {
150: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s150x150/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=976a0dd9be4381a97f256953d10ed769&oe=5FBFD370",
240: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s240x240/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=2bc255b974c57f4c2ab81a7fcc726e1c&oe=5FBE4926",
320: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s320x320/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=d3da5b238d4a70ec2f9fe7cf09ea144e&oe=5FBFD2A0",
480: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s480x480/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=250ecd60fa86c6aeabd2a236036d1f7b&oe=5FBC2546",
640: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=24&oh=84e330986ce3ae71ed1895c5a2a9690b&oe=5FBDF4C9"
},
ByahrrSDqVa: {
150: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s150x150/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=123a990bf0f44e97caacc68994832055&oe=5FBE7B20",
240: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s240x240/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=712e92714159df1a7deedb3e8f9fdc23&oe=5FBD1AAB",
320: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s320x320/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=ce04f8a32e2fe225e66b7cb4f99c5987&oe=5FBC3C13",
480: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s480x480/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=5a4c624b33388220fc0623204f0d006d&oe=5FBF8D4F",
640: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=24&oh=c9ba3bee3d16a32ceeaee5f951cdc592&oe=5FBC907F"
},
...
}
Now we have created our latest media object, we can then builds a slick slider using this custom data slides object variable.
Read my comments in the script to see what is happening.
https://gist.github.com/joshmoto/e23dad634fcdf6974eeca396387cba8c
// jquery on ready
(function($) {
// instagram username
let username = 'github';
// slide count (max ever returned in callback data for a user is 12)
let count = 12;
// instagram feed slider
const $slider = $('#instagram-feed-slider');
// grab our instagram feed
$.instagramFeed({
'username': username,
'container': false,
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': function(data) {
// latest owner timeline media not videos
let media = data.edge_owner_to_timeline_media.edges;
// slider media data
let slides = {};
// each media function
$.each(media, function(i, item) {
// current slide index
let id = item.node.shortcode;
// create thumb data object
let thumb_data = {};
// each item node thumb resource function
$.each(item.node.thumbnail_resources, function(i, thumb) {
// get thumb data width and src url
thumb_data[thumb.config_width] = thumb.src;
// add thumb data to our slides object
slides[id] = thumb_data;
});
});
// iterator counter
let iterator = 0;
// each slides function
$.each(slides, function(id, slide) {
// add 1 to iterator
iterator++;
// if iterator is less than or equal to count
if (iterator <= count) {
// create our slide html string ( div > a > img )
let slickSlide = '<div><a href="https://www.instagram.com/p/' + id + '" target="_blank"><img src="' + slide[640] + '" alt=""/></a></div>';
// append it to feed div
$slider.append(slickSlide);
}
});
// init slider with slick
$slider.on('init', function(slick) {
// do stuff here when slick initializes
// slight delay so slick init completes render
setTimeout(function() {
// reveal the slider with opacity
$slider.addClass('slick-reveal');
// delay time .1 second
}, 100);
// then our slick options
}).slick({
mobileFirst: true,
dots: true,
infinite: true,
arrows: false,
adaptiveHeight: true,
autoplay: true,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [{
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 6,
slidesToScroll: 6
}
}
]
});
}
});
})(jQuery);BODY {
margin: 0;
padding: 20px;
}
#instagram-feed-slider {
height: 0;
opacity: 1;
transition: all .5s ease;
}
#instagram-feed-slider.slick-initialized {
height: auto;
}
#instagram-feed-slider.slick-initialized.slick-reveal {
opacity: 1;
}
#instagram-feed-slider .slick-slide {
display: block;
height: auto;
}
#instagram-feed-slider .slick-slide A {
width: 100%;
display: block;
overflow: hidden;
}
#instagram-feed-slider .slick-slide IMG {
width: 100%;
display: block;
}<div id="instagram-feed-slider"></div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/1.4.1/jquery.instagramFeed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>Here is another version request by @GustavoReis to include captions in the instagram feed slick slider.
I've modified the slide object by moving thumb_data into slide property called media, and the caption into slide property called caption.
{
B27UTWZDlZY: {
caption: "When you’re known for speed, every step counts.",
media: {
150: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/s150x150/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&tp=16&oh=4547a183de107937cd4fc8829cb28ff6&oe=5F96F63E",
240: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/s240x240/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&tp=16&oh=307c0ce577bbeea2fb9ee4bbb898097a&oe=5F96C138",
320: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/s320x320/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&tp=16&oh=9f90ae2b01ff38419e23ee07ef3c2a02&oe=5F96874E",
480: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&oh=33ec0085b8863af3ffda4bd1a59c809e&oe=5F970099",
640: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/c157.0.406.406a/69856901_215241699458552_7535240597822423815_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=108&_nc_ohc=DWSHUK-9GosAX9mw4Ol&oh=33ec0085b8863af3ffda4bd1a59c809e&oe=5F970099"
}
},
BvzWaX8hg50: {
caption: "For the Front team, continuous deployments are a best practice, not an exception.",
media: {
150: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s150x150/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=976a0dd9be4381a97f256953d10ed769&oe=5FBFD370",
240: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s240x240/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=2bc255b974c57f4c2ab81a7fcc726e1c&oe=5FBE4926",
320: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s320x320/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=d3da5b238d4a70ec2f9fe7cf09ea144e&oe=5FBFD2A0",
480: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s480x480/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=15&oh=250ecd60fa86c6aeabd2a236036d1f7b&oe=5FBC2546",
640: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/54511581_155220282170447_1722264597870720283_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=111&_nc_ohc=YdpTrs4jVysAX-88LWe&_nc_tp=24&oh=84e330986ce3ae71ed1895c5a2a9690b&oe=5FBDF4C9"
}
},
ByahrrSDqVa: {
caption: "Going from silos to a shared environment is a challenge.",
media: {
150: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s150x150/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=123a990bf0f44e97caacc68994832055&oe=5FBE7B20",
240: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s240x240/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=712e92714159df1a7deedb3e8f9fdc23&oe=5FBD1AAB",
320: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s320x320/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=ce04f8a32e2fe225e66b7cb4f99c5987&oe=5FBC3C13",
480: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s480x480/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=15&oh=5a4c624b33388220fc0623204f0d006d&oe=5FBF8D4F",
640: "https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/63430826_120138045872791_614866485576038131_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=107&_nc_ohc=lIqX8s7NhLQAX-LlxUs&_nc_tp=24&oh=c9ba3bee3d16a32ceeaee5f951cdc592&oe=5FBC907F"
}
},
...
}
See comments in code below, if anyone can improve concept please post an answer with updated code or alternative solution.
// jquery on ready
(function($) {
// instagram username
let username = 'github';
// slide count (max ever returned in callback data for a user is 12)
let count = 12;
// instagram feed slider
const $slider = $('#instagram-feed-slider');
// grab our instagram feed
$.instagramFeed({
'username': username,
'container': false,
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': function(data) {
// view raw instagram callback data
// console.log(data);
// latest owner timeline media not videos
let media = data.edge_owner_to_timeline_media.edges;
// slider media data
let slides = {};
// each media function
$.each(media, function(i, item) {
// current slide index
let id = item.node.shortcode;
// set slides id as object
slides[id] = {};
// get media caption from item
let caption = item.node.edge_media_to_caption.edges;
// check media caption is an array
if($.isArray(caption)) {
// check if we have caption array item
if(caption[0]) {
// set caption as caption
slides[id].caption = caption[0].node.text;
}
}
// create thumb data object
let thumb_data = {};
// each item node thumb resource function
$.each(item.node.thumbnail_resources, function(i, thumb) {
// get thumb data width and src url
thumb_data[thumb.config_width] = thumb.src;
// add thumb data to our slides object
slides[id].media = thumb_data;
});
});
// use this console the our custom slick instagram slides data
//console.log(slides);
// iterator counter
let iterator = 0;
// each slides function
$.each(slides, function(id, slide) {
// add 1 to iterator
iterator++;
// if iterator is less than or equal to count
if (iterator <= count) {
// create our slide html string ( div > a > img )
let slickSlide = '';
// build our slick slide figure image with figcaption
slickSlide += '<figure>';
slickSlide += '<a href="https://www.instagram.com/p/' + id + '" target="_blank">';
slickSlide += '<img src="' + slide.media[640] + '" alt=""/>';
slickSlide += '</a>';
// if we have a caption
if(slide.caption) {
// add figcaption to figure
slickSlide += '<figcaption>' + slide.caption + '</figcaption>';
}
// close our slick slide figure
slickSlide += '</figure>';
// append figure slide to instagram feed slider div
$slider.append(slickSlide);
}
});
// init slider with slick
$slider.on('init', function(slick) {
// do stuff here when slick initializes
// slight delay so slick init completes render
setTimeout(function() {
// reveal the slider with opacity
$slider.addClass('slick-reveal');
// delay time .1 second
}, 100);
// then our slick options
}).slick({
mobileFirst: true,
dots: true,
infinite: true,
arrows: false,
adaptiveHeight: true,
autoplay: true,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [{
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 6,
slidesToScroll: 6
}
}
]
});
}
});
})(jQuery);BODY {
font-family: 'Helvetica', serif;
margin: 0;
padding: 20px;
}
#instagram-feed-slider {
height: 0;
opacity: 1;
transition: all .5s ease;
}
#instagram-feed-slider.slick-initialized {
height: auto;
}
#instagram-feed-slider.slick-initialized.slick-reveal {
opacity: 1;
}
#instagram-feed-slider .slick-slide {
display: block;
height: auto;
margin: 0;
padding: 0;
}
#instagram-feed-slider .slick-slide A {
width: 100%;
display: block;
overflow: hidden;
}
#instagram-feed-slider .slick-slide IMG {
width: 100%;
display: block;
}
#instagram-feed-slider .slick-slide FIGCAPTION {
font-size: 80%;
hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
}<div id="instagram-feed-slider"></div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/1.4.1/jquery.instagramFeed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>Here is a fiddle version https://jsfiddle.net/joshmoto/xepLr83h/1/