This tutorial provides the code which enables you to replace the home section 1 background image in the Parallax Pro child theme by StudioPress with a full width responsive slider covering the entire widget background and site header background.
Watch the following demo video to see exactly what the tutorial provides :
Responsive Menu
1. You can also display the slider images behind the site header, site and menu as seen in the above video screencast. You’ll need to add a few lines of CSS to do this which are provided below for logged in members.
or
2. Leave the site header background as is and only display the slider behind the home section 1 widget background.
Here’s what the slider looks like if you keep the default site header background :
Code Installation
Once you download the folder below for logged in users, there’s 3 steps :
Step 1 : From the download folder, upload the folder named slider to the Parallax Pro theme folder.
Step 2 : From the download folder, copy the PHP code between lines 8 – 18 from the front-page.php file and paste it after the opening php tag in the Parallax Pro themes front-page.php file.
This is awesome! Just what I was looking for and very easy to implement. Thanks for the tutorials and the code, Brad!
Is there a way to add the little “page dots” at the bottom of the slider?
Hello Bryan. This slider doesn’t include pagination however you can add it using custom code or you could add the navigation using another slider however there is extra work involved in providing that solution which requires a custom tutorial request.
Hey Brad – question: how do you adjust the speed? I’d like to slow the rate of change down.
Change the value for the duration : The amount of time in between slides expressed as the number of milliseconds in backstretch-set.js on line 18.