Javascript Instagram进纸滑条

我正在尝试使用jquery.instagramFeed.js和slick.js创建带有instagram提要的旋转木马滑块

在codepen上，我插入了instagram提要和下面的滑动条，以查看滑动条是否正常工作

代码笔：

我更改了instagram feed js上的一些代码，在第132行添加了：

html+=”

并在第173行结束该部分：

html+=”

尝试在instagram提要上运行slick slider但未成功。
使用
instagramFeed.js
回调选项运行函数，返回instagram用户数据对象，您可以使用该对象构建slick slider

返回的instagramFeed数据对象相当重，但请参见下面的演示，它使用返回的数据对象并循环浏览所有用户媒体项，构建一个自定义
幻灯片
对象，并在媒体计数值处停止，这是我们制作的自定义对象

用户可以获得的最大幻灯片数为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"
  },
  ...
}



现在我们已经创建了最新的媒体对象，然后我们可以使用这个自定义数据
slides
object变量构建一个光滑的滑块

阅读我在脚本中的评论，看看发生了什么



//jquery on ready
（函数（$）{
//instagram用户名
让username='github'；
//幻灯片计数（用户在回调数据中返回的最大值为12）
让计数=12；
//instagram进纸滑块
常量$slider=$（“#instagram馈送滑块”）；
//获取我们的instagram订阅源
$.instagramFeed({
“用户名”：用户名，
“容器”：false，
“显示配置文件”：false，
“显示传记”：false，
“显示库”：true，
“回调”：函数（数据）{
//最新所有者时间表媒体而非视频
let media=data.edge\u owner\u to\u timeline\u media.edges；
//滑块媒体数据
让幻灯片={}；
//每个媒体功能
$。每个（介质、功能（i、项目）{
//当前幻灯片索引
设id=item.node.shortcode；
//创建thumb数据对象
设thumb_data={}；
//每个项目节点都具有资源功能
$.each（item.node.thumboil_资源、函数（i、thumb）{
//获取thumb数据宽度和src url
thumb_data[thumb.config_width]=thumb.src；
//向幻灯片对象添加拇指数据
幻灯片[id]=拇指_数据；
});
});
//迭代器计数器
设迭代器=0；
//每个幻灯片功能
$。每张幻灯片，功能（id，幻灯片）{
//将1添加到迭代器
迭代器++；
//如果迭代器小于或等于count
if（迭代器a>img）
让滑溜=''；
//将其附加到提要div
$slider.append（滑动条）；
}
});
//带滑头的初始滑块
$slider.on（'init'，函数（slick）{
//当slick初始化时在这里做一些事情
//稍微延迟，使平滑初始化完成渲染
setTimeout（函数（）{
//以不透明度显示滑块
$slider.addClass（'slick-reveal'）；
//延迟时间，1秒
}, 100);
//然后是我们巧妙的选择
}).滑头({
mobileFirst：没错，
点：是的，
无限：是的，
箭头：错，
自适应高度：正确，
自动播放：对，
幻灯片放映：2，
幻灯片滚动：2，
响应：[{
断点：480，
设置：{
幻灯片放映：3，
幻灯片滚动：3
}
},
{
断点：600，
设置：{
幻灯片放映：4，
幻灯片滚动：4，
}
},
{
断点：1024，
设置：{
幻灯片放映：6，
幻灯片滚动：6
}
}
]
});
}
});
})（jQuery）
正文{
保证金：0；
填充：20px；
}
#instagram进纸滑块{
身高：0；
不透明度：1；
过渡：所有。5s轻松；
}
#instagram-feed-slider.slick-initialized{
高度：自动；
}
#instagram-feed-slider.slick-initialized.slick-reveal{
不透明度：1；
}
#instagram进纸滑块。光滑的滑块{
显示：块；
高度：自动；
}
#instagram进纸滑块。光滑的滑块A{
宽度：100%；
显示：块；
溢出：隐藏；
}
#instagram进纸滑块。光滑滑块IMG{
宽度：100%；
显示：块；
}
请查看我们的聊天记录@joshmoto。