Smash Balloon Instagram Slider

I needed two Instagram feeds on one page. And one needed to be a slider showing 1 photo at a time and the other needed to show a grid of 10. here is the code.

Your shortcode sample:

[instagram-feed type=user id=14655218 class=carolynslider num=15]

Your JavaScript sample:

var sbiSpeed = 5000,
$sbiItem = jQuery(‘#sb_instagram.carolynslider .sbi_item’),
sbiNum = $sbiItem.length,
sbiCur = 0;
$sbiItem.hide();
setTimeout(function(){ jQuery(‘#sb_instagram.carolynslider .sbi_item’).eq(0).show(); }, 200);
setInterval(function(){
jQuery(‘#sb_instagram.carolynslider .sbi_item’).eq(sbiCur).fadeOut( “fast”, function() {
if( sbiCur == sbiNum-1 ) sbiCur = -1;
sbiCur++;
jQuery(‘#sb_instagram.carolynslider .sbi_item’).eq(sbiCur).fadeIn();
});
}, sbiSpeed);

Now the only trick here is that, in Settings, you need to change the number of slides from 10 to 1 in order for the slider to show the 1 photo at the right size of 100% – otherwise it shows really small.

Screen Shot 2015-04-22 at 10.19.22 AM

Screen Shot 2015-04-22 at 10.19.09 AM

Screen Shot 2015-04-22 at 10.18.32 AM

Screen Shot 2015-04-22 at 10.18.40 AM

Comments are closed