Instagram Feed 光滑滑块
Instagram Feed Slick Slider
我正在尝试使用 jquery.instagramFeed.js 和 slick.js 创建带有 Instagram 提要的旋转木马滑块。
我在 codepen 上插入了 instagram 提要和下方的 slick 滑块，以查看 slick 是否正常工作。
代码笔：https://codepen.io/adrianovarlotta/pen/XWKNBqg
我更改了 instagram feed js 上的一些代码，在第 132 行添加：
html += "<section class='regular slider instagram_gallery'>";
并关闭第 173 行的该部分：
html += "</section>";
尝试在 Instagram Feed 上使用光滑的滑块但没有成功。
如何使用 instagramFeed.js 回调选项 运行 一个函数 returns instagram 用户数据 object 可以用来构建一个光滑的滑块。
返回的 instagramFeed 数据 object 相当大，但请看下面我的演示，它使用返回的数据 object 并循环遍历所有用户媒体项，构建自定义 slides object 并在媒体计数值处停止，这是我们制作的自定义 object...
用户最多可获得 12 张幻灯片，标签最多可获得 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"
},
...
}
现在我们已经创建了最新的媒体 object，然后我们可以使用此自定义数据 slides object 变量构建一个光滑的滑块。
阅读我在脚本中的评论，看看发生了什么。
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>
这是 @GustavoReis 提出的另一个版本请求，要求在 Instagram 源平滑滑块中包含字幕。
我修改了幻灯片 object，将 thumb_data 移动到名为 media 的幻灯片 属性 中，并将标题移动到名为 属性 的幻灯片中23=].
{
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"
}
},
...
}
查看下面代码中的评论，如果有人可以改进概念，请post使用更新的代码或替代解决方案的答案。
// 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>
这是一个fiddle版本https://jsfiddle.net/joshmoto/xepLr83h/1/
我正在尝试使用 jquery.instagramFeed.js 和 slick.js 创建带有 Instagram 提要的旋转木马滑块。
我在 codepen 上插入了 instagram 提要和下方的 slick 滑块，以查看 slick 是否正常工作。
代码笔：https://codepen.io/adrianovarlotta/pen/XWKNBqg
我更改了 instagram feed js 上的一些代码，在第 132 行添加：
html += "<section class='regular slider instagram_gallery'>";
并关闭第 173 行的该部分：
html += "</section>";
尝试在 Instagram Feed 上使用光滑的滑块但没有成功。
如何使用 instagramFeed.js 回调选项 运行 一个函数 returns instagram 用户数据 object 可以用来构建一个光滑的滑块。
返回的 instagramFeed 数据 object 相当大，但请看下面我的演示，它使用返回的数据 object 并循环遍历所有用户媒体项，构建自定义 slides object 并在媒体计数值处停止，这是我们制作的自定义 object...
用户最多可获得 12 张幻灯片，标签最多可获得 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"
},
...
}
现在我们已经创建了最新的媒体 object，然后我们可以使用此自定义数据 slides object 变量构建一个光滑的滑块。
阅读我在脚本中的评论，看看发生了什么。
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>
这是 @GustavoReis 提出的另一个版本请求，要求在 Instagram 源平滑滑块中包含字幕。
我修改了幻灯片 object，将 thumb_data 移动到名为 media 的幻灯片 属性 中，并将标题移动到名为 属性 的幻灯片中23=].
{
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"
}
},
...
}
查看下面代码中的评论，如果有人可以改进概念，请post使用更新的代码或替代解决方案的答案。
// 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>
这是一个fiddle版本https://jsfiddle.net/joshmoto/xepLr83h/1/