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，給予「旋轉木馬內」的div是你instafeed的目標的ID。這個元素內沒有任何東西。就像這樣：

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

    </div> 
</div> 

然後，在你instafeed，通過把圖像是具有類「商品」的div之間建立的模板，並給出了第一個項目類「主動」：

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

}); 

現在你應該有一個Instafeed工作輪播。