JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.sowecms.com/demos/jquery.instagramFeed/jquery.instagramFeed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div id="instagram-feed-slider"></div>

SCSS

BODY {
  margin: 0;
  padding: 20px;
}

#instagram-feed-slider {
  height: 0;
  opacity: 1;
  transition: all .5s ease;
}

#instagram-feed-slider.slick-initialized {
  height: auto;
}

#instagram-feed-slider.slick-initialized.slick-reveal {
  opacity: 1;
}

#instagram-feed-slider .slick-slide {
  display: block;
  height: auto;
}

#instagram-feed-slider .slick-slide A {
  width: 100%;
  display: block;
  overflow: hidden;
}

#instagram-feed-slider .slick-slide IMG {
  width: 100%;
  display: block;
}

JavaScript

// jquery on ready
(function($) {

  // instagram username
  let username = 'github';

  // slide count (max ever returned in callback data for a user is 12)
  let count = 1;

  // instagram feed slider
  const $slider = $('#instagram-feed-slider');

  // grab our instagram feed
  $.instagramFeed({
    'username': username,
    'container': false,
    'display_profile': false,
    'display_biography': false,
    'display_gallery': true,
    'callback': function(data) {

      // console.log(data);

      // latest owner timeline media not videos
      let media = data.edge_owner_to_timeline_media.edges;

      // slider media data
      let slides = {};

      // each media function
      $.each(media, function(i, item) {

        // current slide index
        let id = item.node.shortcode;
        
        // get media caption from item
        let caption = item.node.edge_media_to_caption.edges;
        
        // check media caption is an array
        if($.isArray(caption)) {
        
           // check if we have caption array item 
           if(caption[0]) {
            
            // set caption as caption
            caption = caption[0].node.text;
            
            // log the caption
            console.log(caption);
          
          }
        
        }
        
        // create thumb data object
        let thumb_data = {};

        // each item node thumb resource function
        $.each(item.node.thumbnail_resources, function(i, thumb) {

          // get thumb data width and src url
          thumb_data[thumb.config_width] = thumb.src;

          // add thumb data to our slides object
          slides[id] = thumb_data;

        });

      });
      
      console.log(slides);

      // iterator counter
      let iterator = 0;

      // each slides function
      $.each(slides, function(id, slide) {

        // add 1 to iterator
        iterator++;

        // if iterator is less than or equal to count
        if (iterator <= count)...