InstaSlider: Instagram Slider Plugin

InstaSlider is a lightweight (just 2kb when minified!) jQuery plugin image slider / carousel plugin that populates content from an Instagram hashtag.

Download: https://github.com/jonsherrard/instaslider

Demonstration: https://jsfiddle.net/pCQkF/2/

Plugin homepage: https://github.com/jonsherrard/instaslider

Implementation:

1. FIRST, INCLUDE JQUERY FILES

<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="instaslider.jquery.min.js"></script>

2. ADD YOUR HTML

<div class="myslider"></div>

3. CUSTOMIZE INSTASLIDER WITH CSS

InstaSlider can be fully customised using CSS. The default styling is provided below.

.myslider{width:500px;height:500px;border:1px solid gray;margin:0 auto}
.instaslider-wrapper{width:500px;height:500px;background:#e7e7e7;overflow:hidden}
.instaslider-wrapper ul{width:10000px;list-style:none}
.instaslider-wrapper ul li{float:left}
div.error{width:100%;height:100%;background:rgba(0,0,0,0.6);color:#fff;font-family:arial;text-align:center}
div.error p{width:300px;line-height:180%;margin:0 auto;padding:167px 0 0}
.instaslider-wrapper ul li img{width:500px;height:auto}
.instaslider-nav{position:relative;top:-50%;margin:-50px 0 0}
.instaslider-nav .prev,.instaslider-nav .next{border:0;width:100px;height:100px;cursor:pointer;background:#072835;text-indent:-9999px}
.instaslider-nav .prev:hover{background-position:-2px -100px}
.instaslider-nav .next:hover{background-position:-98px -100px}
.instaslider-nav .prev{float:left;background:#072835 url(../img/arrow_sprite.png) 0 0}
.instaslider-nav .next{float:right;background:#072835 url(../img/arrow_sprite.png) -100px 0}

4. NOW, CALL INSTASLIDER PLUGIN

// Simple call
$('.myslider').instaSlider({
       clientID: 'your-id-here'
});
 
// Call with options
$('.myslider').instaSlider({
      clientID: null,
      hash: 'photooftheday',
      prevClass: 'prev',
      nextClass: 'next',
      limit: 5,
      duration: 1000
});

Options:

clientID	String	Default : null – A clientID must be generated for this plugin to work. You can do this at http://instagram.com/developer/clients/register/.
hash	String	Default : photooftheday – An Instagram hashtag for plugin to fetch content from.
prevClass	String	Default : prev – css class for ‘previous’ nav button.
nextClass	String	Default : next – css class for ‘next’ nav button.
limit	Integer	Default : 5 – Allows for limiting the number of slides.
duration	Integer	Default : 400 – Determines the duration of the slide animation.

Screenshots: