Docs    Instagram    Customizations

Creating a carousel or slideshow from your Instagram photos

Version 2.0 and above

Version 2.0 and above has a carousel/slideshow feature built right into it. Simply use the ‘Carousel’ settings on the plugin’s Customize page to create a carousel of your photos, or use the shortcode options outlined on the plugin’s ‘Display your Feed’ page. For example:

[instagram-feed carousel=true]

Less than version 2.0

It’s possible to achieve a very basic slideshow with versions less than 2.0 by doing the following:

1) Set the number of photos to display to be the number of photos you want to include in the slideshow (10 for example)
2) Add a class to the feed you want to add the slideshow to: [instagram-feed class="instagram-carousel"]
3) Add the following to the plugin’s Custom JavaScript section, which is on the plugin’s Customize page, making sure to match the class on the first line to the class you added to your shortcode:

var $sb_instagram = jQuery('.instagram-carousel'),
    sbiSpeed = 5000,
    $sbiItem = $sb_instagram.find('.sbi_item'),
    sbiNum = $sbiItem.length,
    sbiCur = 0,
    sbiPhotoHeight = $sb_instagram.find('.sbi_photo').eq(0).innerWidth();
setTimeout(function(){ $sb_instagram.find('.sbi_item').eq(0).show(); }, 200);
    $sb_instagram.find('.sbi_item').eq(sbiCur).fadeOut( "fast", function() {
        if( sbiCur == sbiNum-1 ) sbiCur = -1;
}, sbiSpeed);

4) You can change the speed of the transition by editing the spiSpeed = 5000 value at the top of the snippet. 5000 is equal to 5 seconds (5000ms).


Couldn’t find your answer in the docs?

Contact Support