Owl Carousel2 with instagram ajax loop

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>


<div class="container">

  <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

//Featured caro

//instaCarousel();

instaCarouselMultipleAPI();


function featuredCarousel() {
  var checkWidth = $(window).width();
  var $featuredOWL = $('.owl-carousel');
  //console.log($featuredOWL);
  $featuredOWL.owlCarousel({
    loop: true,
    margin: 5,
    nav: true,
    //items: 3,
    responsive: {
      0: {
        items: 5
      },
      768: {
        items: 5
      },
      1000: {
        items: 5
      }
    },
    navText: ["<div class='nav-btn prev-slide'></div>", "<div class='nav-btn next-slide'></div>"],
    navContainer: '.contect-img .custom-nav',
  });
}

function instaCarousel() {

  var username = "39inliving";
  if ($(window).width() < 769) {
    var max_num_items = 10; // how much photos do you want to get
  } else {
    var max_num_items = 10; // how much photos do you want to get
  }

  var jqxhr = $.ajax("https://www.instagram.com/" + username + "/?__a=1").done(function() {}).fail(function() {}).always(function(data) {
    items = data.graphql.user.edge_owner_to_timeline_media.edges;
    $.each(items, function(n, item) {
      //console.log(item.node);
      if ((n + 1) <= max_num_items) {
        //$('.owl-carousel').append('<a target="_blank" href="'+item.node.display_url+'"><img src="'+item.node.thumbnail_src+'"></div>');
        $('.owl-carousel').append('<img src="' + item.node.thumbnail_src + '">');
      }
    });
    featuredCarousel();

  });

}





async function instaCarouselMultipleAPI() {


  //instagram feed
  var access_token = 'IGQVJYYW5EbEtKeGM4bnItbk4ySHdyV3IyYW1kRkdVNXNSMTl3amtEa3lfYzJoRDBlSWJOaVFiTUtqcm9ONWVWM01BUi1udzRGT0thU2xzdEcxUElFTGZA1MXpHVWFKMFN1NGMyVU9R'; // learn how to obtain it below
  var client_secret = 'a78dc498de7b8d107e9242da26ec164e'; // User ID - get it in source HTML of your Instagram profile or look at the next example :)
  if ($(window).width() < 769) {
    var num_photos = 100; // how much photos do you want to get
  } else {
    var num_photos = 100; // how much photos do you want to...