Owl Carousel2 with instagram feed

Basic demo

by lemon kazi

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<p>
https://www.findinstaid.com/
https://instagram.pixelunion.net/

  The 2 images below should <b>NOT</b> match<br>
  if they are, its because Instagram is not honoring "max_id" for public users
</p>
<p>
Url 1: <a id='url1' target="_blank"></a><br>
</p>
<p>
Url 2: <a id='url2' target="_blank"></a><br>
</p>

<div class="container">
  <img id="img1">
  <img id="img2" >
  <div class="contect-img-insta">
  
  
  </div>
  <div class="contect-img">
    <div class="owl-carousel owl-theme">

    </div>
    <div class="owl-theme">
      <div class="owl-controls">
        <div class="custom-nav owl-nav"></div>
      </div>
    </div>
  </div>
</div>

CSS

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

JavaScript

var urlPrefix = 'https://www.instagram.com/lemon_kazi/';
var apiUrl = urlPrefix + '?__a=1';
//$('#url1').attr('href', apiUrl).text(apiUrl);

function updatepage(id, src) {
  //$('#img'+id).attr('src', src);
}

/**********************************************************
	Public User section
*/
function getFirstImg(json) {
  return json.graphql.user.edge_owner_to_timeline_media.edges[1].node.display_url;
}

function getCursor(json) {
  return json.graphql.user.edge_owner_to_timeline_media.page_info.end_cursor;
}

function makeNextReqeust(end_cursor) {
  var maxIDUrl = urlPrefix + '?__a=1&max_id=' + end_cursor
  $('#url2').attr('href', maxIDUrl).text(maxIDUrl);

  $.getJSON(maxIDUrl, function(json) {
    var img = getFirstImg(json);
    updatepage(2, img);
  })
}

$.getJSON(apiUrl, function(json) {
  var img = getFirstImg(json);
  updatepage(1, img);
  var end_cursor = getCursor(json);
  $('#cursor').text('end_cursor=' + end_cursor);
  makeNextReqeust(end_cursor);
})

//instagram feed
var token = '3957159322.1677ed0.60175cfe27524f3da51f512f6a67cbe0'; // learn how to obtain it below
var userid = 3957159322; // User ID - get it in source HTML of your Instagram profile or look at the next example :)
if ($(window).width() < 769) {
  var num_photos = 6; // how much photos do you want to get
} else {
  var num_photos = 9; // how much photos do you want to get
}


$.ajax({
  url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // or /users/self/media/recent for Sandbox
  dataType: 'jsonp',
  type: 'GET',
  data: {
    access_token: token,
    count: num_photos
  },
  success: function(data) {
    for (x in data.data) {
      //console.log(data.data);

      if (data.data[x].carousel_media) {
        for (c in data.data[x].carousel_media) {
          //$('.contect-img-insta').append('<div class="sns-cell"><img src="'+data.data[x].carousel_media[c].images.standard_resolution.url+'"></div>');
        }
      } else {
       ...