JSFiddle - React, Tailwind, and code Playground
HTML
<div id="instagram-feed">
<div id="divInstagramCarousel">
<ul id="insta-slider">
</ul>
</div>
</div>
CSS
#divInstagramListWrapper li
{
width: 26%;
padding: 3px;
padding-bottom: 0px;
margin: 7px;
border: solid 1px #E5E6E7;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
#divInstagramListWrapper li img{ width: 100%; padding: 0px; }
#divInstagramListWrapper ul { width: 100%; margin: 1%; margin-top: 1%; }
#pics3{ padding-bottom: 15px; }
#instagram-feed h3{ margin-left: 10px; margin-bottom: 10px; padding-top: 15px; }
#instagram-feed
{
background-color:white;
padding-bottom: 10px;
position: relative;
margin-bottom: 10px;
}
.instagram-pic img{ margin: auto; width: 100%; }
.instagram-pic{ width: 95%; border: solid 1px #E5E6E7; margin: auto; padding: 2px; padding-bottom: 0px; }
.instagram-text{ margin-left: 10px; margin-top: 10px; padding-bottom: 10px; }
.instagram-icons ul { list-style-type: none; }
.instagram-icons img { margin-left: 5px; margin-bottom: -2px;}
.instagram-likes, .instagram-comments
{
display: inline-block;
margin-left: 10px;
margin-bottom: 5px;
padding-top: 5px;
*display: inline-block;
}
.instagram-comments { margin-left: 20px; }
#divInstagramCarousel { height: auto; padding-bottom: 5px; }
#insta-slider { list-style: none outside none; padding: 1px; }
#insta-slider li { list-style: none; display: none; position: absolute; padding: 1px; }
#insta-slider li:first-child { display: inline-block; }
JavaScript
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/tags/bringload/media/recent?access_token=515996923.0336ad2.3a8bb948a7264f399e348fb9e56f97af",
success: function(instagram) {
for (var i = 0; i < 12; i++) {
$("#insta-slider").append("<li><div class='instagram-pic'><a target='_blank' href='"+ instagram.data[i].link +"'><img src='"+ instagram.data[i].images.standard_resolution.url +"'/></a></div><strong><p class='instagram-text'></p></strong><div class='instagram-icons'></div></li>");
$(".instagram-text:eq("+i+")").text(instagram.data[i].caption.text);
$(".instagram-icons:eq("+i+")").append("<strong><p class='instagram-likes'><a target='_blank' href='"+ instagram.data[i].link +"'></a><img src='/_public/themes/shared/images/instagram-like.png'/></p></strong>");
$(".instagram-likes a:eq("+i+")").text(instagram.data[i].likes.count);
$(".instagram-icons:eq("+i+")").append("<strong><p class='instagram-comments'><a target='_blank' href='"+ instagram.data[i].link +"'></a><img src='/_public/themes/shared/images/instagram-comment.png'/></p></strong>");
$(".instagram-comments a:eq("+i+")").text(instagram.data[i].comments.count);
}
}
});
});
(function($){
$.fn.MySlider = function(interval) {
var slides;
var cnt;
var amount;
var j;
function run() {
// hiding previous image and...