July 23, 2017: Here's an easier method for doing the same by using Featured Galleries plugin instead of Soliloquy.
In this tutorial, we shall replace the single background image for Front Page 1 section in Infinity Pro with a set of images uploaded to a Soliloquy slider (free or commercial) and displayed with a fading effect one after the other, cycling via Backstretch.
If Soliloquy is not active or if a slider named "Front Page 1" is not present in published status, the default background image (bg-1.jpg, changeable via the customizer) will continue to appear.
Create a slider named Front Page 1 and upload/select the desired background images. Since we are going to just use it as an easy way to manage the background images, settings in Config, Mobile and Misc tabs do not matter and need not be configured.
To set the speed and fade speed. This is the area that needs to be modified?
If you get a chance, can you let us know if 256studio's problem is fixable. I was thinking the simplest would be to turn off the slider for mobile, doable?
I noticed while viewing my website in mobile view I see the next slider above the menu.
I have updated the tutorial and added Step 5 which should hopefully fix this.
I've made a couple of CSS changes in a test site regarding this.
Can we use this code with Altitude pro ?
I remember you did something similar but It worked with soliloquy premium.
Yes. Just tested and this works fine for Altitude Pro as well. Step 5 is not needed/applicable.
In Step 4 it'd be altitude_front_page_genesis_meta() instead of infinity_front_page_genesis_meta().
Thank you for fixing the small issue I pointed out. Works like a champ on my localhost. I will be moving this to my site very soon.
Would this work for Utility Pro?
Sridhar- I have not been able to get this to work. I was so excited and have stepped through all of your steps.
Am I missing something? I have the Solilo slider, etc.
I was able to get this to work on one Infinity Pro site, but not the other. The first was a site I inherited, when I really should just rebuild it, especially since it works fine on one, not the other. Can't wait to try the fade addition. Thanks Sridhar!
I have also followed all the steps and get get this working. Any ideas?
I followed this step by step, but it will not work. It shrinks the area down and does not give me the slider at all. I have created the slider in Soliloquy and called it Front Page 1. I created both the .js files and they are saved in the js folder. I copied and pasted the code for the child themes function.php and then I copied the entire code you shared for the front-page.php. You can see what it is doing here, http://demo.forwardmotiondesigns.com. Thanks for the help.
I went through and deleted all the files I had created or changed and recreated them all and now I just get the original background image without the slider appearing. I'm at a loss. I have gone back through functions.php, front-page.php, backstretch-set.js, jquery.backstretch.min.js and style-front.css to make sure they all match what you have above and they do. Not sure where to go from here.
Can you send me the WP and FTP logins via https://sridharkatakam.com/contact/? Do mention a link to this post or your comment in your message.
In the code to be added in functions.php, you need to replace 529 with the ID of your slider. I changed it to 65 and it works now.
Thank you very much Sridhar! I now see I missed that note in your code. Looking at all the big picture stuff and missed the little details. Lesson learned. Thanks for all your excellent tutorials! They have saved me many times over.
I have found two more issues I am having with how this shows on mobile. When looking at this at full mobile width, the slider is not adjusting the height, so it is showing only a small portion of the images. But, when I look at it with my phone or browser window in the portrait position, the image adjusts to the right height. How can I fix this. Secondly, I am noticing that it is pushing my front-page 2 widget down and there is a lot of extra white space between the slider and the content now when looking at it on mobile. What is causing this issue? Thank you for your help. My demo site is http://demo.forwardmotiondesigns.com.