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>
// jquery on ready
(function($) {

  // instagram username
  let username = 'github';

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

  // 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) {

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

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

        });

      });

      // 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) {

          // create our slide html string ( div > a > img...