Instagram - Bootstrap 3 carousel with instafeedjs

-2

Я использую instafeedjs для отображения изображений на сайте. Я пытаюсь добавить карусель Bootstrap 3 по следующей ссылке. - http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel-methods.
Когда я запускаю код, он ничего не отображает.Instagram - Bootstrap 3 carousel with instafeedjs

<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>

источник

2015-05-20 meer

Вот код, который поддерживает карусель на загруженных каналах. Количество изображений ограничено значением, установленным параметром instafeed «limit», и карусель работает бесконечно.

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

<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>

Найти рабочую демо here

источник

2015-05-28 12:00:35

Instagram - Bootstrap 3 carousel with instafeedjs

ответ

Смежные вопросы