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:
