javascript - jQuery Instagram Bootstrap3 动态轮播

Question

我正在尝试从 instagram 中提取图像并将它们放入 Bootstrap3 轮播中，以便每个轮播项目包含 2 行 6 张图像。

我可以很好地加载所有内容，但我只是无法理解使项目正确显示在轮播中的逻辑。

 var userFeed = new Instafeed({
            get: 'user',
            userId: <?= $user_id ?>,
            accessToken: '<?= $access_token ?>',
            limit: <?= $num_to_display ?>,
            success: function(data) {
                $('.carousel').carousel({interval:3000});
                // I have tried using .each() too,
                // can't break it into chunks that well
                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');
            }
        });
userFeed.run();

Answer 1

这是我的解决方案:

在您拥有旋转木马的 html 中，为“carousel-inner”div 提供作为您的 instafeed 目标的 id。在此元素中不放置任何内容。像这样:

<div id="carousel" class="carousel slide" data-interval="false">
    <div class="carousel-inner" id="myfeed">

    </div>
</div>  

然后，在您的 instafeed 中，通过将图像放在类为“item”的 div 之间构建模板，并为第一个项目类指定“active”:

    var userFeed = new Instafeed({
    ...
    template: '<div class="item"><img src="{{image}}"/></div>',
    ...
    after:
    function(){
    $('#myfeed > div:nth-child(1)').addClass('active');
    }

});

现在您应该有一个可用的 Instafeed 轮播。