Question

我试图从instagram中提取图像并将它们放入Bootstrap3 Carousel中，以便每个轮播项目包含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旋转木马。

jQuery Instagram Bootstrap3动态轮播

1 个答案: