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

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

  var n = 0;
  var str = '';
  var jqxhr = $.ajax('https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token=' + access_token).done(function() {}).fail(function() {}).always(function(data) {
    var access_token = data.access_token;
    console.log(data);
    $.ajax({
      url: 'https://graph.instagram.com/me/media', // or /users/self/media/recent for Sandbox
      dataType: 'jsonp',
      type: 'GET',
      data: {
        access_token: data.access_token,
        fields: 'id,caption,media_url,media_type'
      },
      success: function(data1) {
        var data2 = data1.data;
        
        for (x in data2) {
          if ((n + 1) <= num_photos) {
            if (data2[x].media_type != 'CAROUSEL_ALBUM') {
              $('.owl-carousel').append('<img src="'+data2[x].media_url+'">');
         ...