Instagram-具有instafeedjs的Bootstrap 3轮播 [英] Instagram - Bootstrap 3 carousel with instafeedjs
问题描述
我正在使用instafeedjs在网站上显示图片.我正在尝试通过以下链接添加Bootstrap 3轮播.
- http://www.tutorialrepublic.com/codelab.php? topic = bootstrap& file = carousel-methods .
当我运行代码时，它什么也不显示.
I am using instafeedjs to display the pictures on a site. I am trying to add Bootstrap 3 carousel by following link.
- http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel-methods.
When I run the code it displays nothing.
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: '****',
clientId: '*************',
limit: 20,
sortBy: 'most-recent',
template: '<div class="item"><img src="{{image}}"/></div>',
success: function (data) {
$('.carousel').carousel({ interval: 3000 });
for (var i = 0; i < $(data.data).size() ; i++) {
$('.carousel-inner').append('<div class="item"></div>');
$('.item').append('<div class="col-sm-2 instagram- placeholder"><img src=' + data.data[i].images.standard_resolution.url + ' class="img-responsive"></div>');
}
$('.carousel').carousel('next');
},
after: function () {
$('#instafeed > div:nth-child(1)').addClass('active');
}
});
feed.run();
</script>
这是HTML:
<div id="carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner" id="instafeed"></div>
</div>
推荐答案
以下是在已加载的供稿上支持轮播的代码.图片数量受到instafeed属性"limit"设置的值的限制，轮播会无限运行.
Here is the code that supports carousel on loaded feeds. The number of image is limited the the value set by the instafeed property 'limit' and the carousel runs infinitely.
HTML
<html>
<head>
<title>Example of Bootstrap 3 Carousel with Instafeed Instagram feeds - Ajith</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sriajith.info/blog/wp-content/uploads/2015/05/instafeed.min_.js"></script>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<div class="carousel-inner" id="instafeed">
</div>
</div>
</div>
</body>
</html>
JavaScript
JavaScript
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'ajith',
clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
limit: 20,
sortBy: 'most-recent',
resolution: "low_resolution",
template: '<div class="item"><img src="{{image}}"/></div>',
after: function () {
$('#instafeed > div:nth-child(1)').addClass('active');
}
});
feed.run();
</script>
在此处
这篇关于Instagram-具有instafeedjs的Bootstrap 3轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
