Display the Instagram Feed in a Carousel layout only on mobile devices

In the Pro version of the plugin it is possible to display a regular grid layout on desktop devices but then switch to a carousel layout on smaller/mobile devices.

1) First, enable the “Carousel” setting for the feed, either on the plugin’s “Customize” page or by using carousel=true in the shortcode.

2) Then try adding the following to the plugin’s Custom JavaScript section, which is at the bottom of the “Customize” settings page:

if( $(window).width() > 480 ){
  $('#sbi_images').removeClass('sbi_carousel sbi_owl-carousel sbi_owl-theme');
  $('#sb_instagram').removeClass('sbi_col_1').addClass('sbi_col_4');
}

The only part you need to change is the sbi_col_4 part at the end which would need to match whatever number of columns you are wanting to display the feed in on non-mobile devices. In the example above, “sbi_col_4” is for a 4 column feed.

By default, the Carousel will be used on the feed, but when it’s above 480 pixels then the snippet removes the carousel and restores the regular layout.