jQuery Instagram Bootstrap3 Dynamic Carousel

Question

인스 타 그램에서 이미지를 가져 와서 Bootstrap3 회전 목마에 넣으려고 각 회전식 메뉴 항목에 6 개의 이미지가 2 행씩 포함되도록하려고합니다.

정상적으로로드 된 모든 것을 가져올 수 있습니다. 회전 목마에 표시된 항목을 올바르게 가져올 수 있도록 내 머리를 감쌀 수 없습니다. "회전 목마 내부가"당신의 instafeed의 대상이되는 ID를 div에, 줄

당신이 당신의 회전 목마가있는 HTML에서 :

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

여기 내 솔루션입니다. 이 요소 안에는 아무것도 넣지 마십시오.

<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'); 
    } 

}); 

그리고 지금을이처럼 Instrument의 회전식 캐 러셀이 있어야합니다.