This tutorial provides the code & instructions for replacing the background image on the front page with a slide show. Here’s the demo video:
- The solution also removes the background image setting from the WordPress customizer.
- You can add as many images to the slider as you like and upload them to your WordPress Media Library.
- You can also very easily add the slider behind any widget area or div container.
Here’s the code and installation instructions for logged in members:
Mark Roberts says
Hello!
This worked perfect. How do I add text and linking to each slide?
Thanks, Mark
Brad Dalton says
You can’t add text and a link when using backstretch. You would need to use a slider like Soliloquy which would require a completely different solution like this https://wpsites.net/web-design/slider-behind-site-header-home-featured-widget-in-agentpress-pro/
Then you will need to add CSS for positioning your captions or use the premium version of the slider which contains a setting to do this.
Mark Roberts says
Okay that’s what I thought, just checking.
Diana Brackmann says
Hi
The images on my homepage scroll through once and remain on the last image in my backstretch-set.js.
I was wondering if there was an additional field in the object {fade: 750,
duration: 500} that I could set where it would continually rotate the images? Or would I create some loop?
Thanks so much!
Brad Dalton says
Try loop:true
Pebblehaven Company says
Using this on a site that has the Agency Pro Theme. How do we make it so the images only rotate on the home page?
Brad Dalton says
Where are you loading the jQuery?
You can add the PHP code to load the jQuery in the front page template of functions file with a conditional tag.
Pebblehaven Company says
We are loading the jQuery in the backstretch-set.js file of the Agency Pro themes js folder.
Brad Dalton says
No, the PHP code which loads the jQuery will look something like this :
Which you can modify to this :
And use in your functions file. Otherwise, use the above code in your fro nt page template without the conditional tag :
Dessalyn Murray says
My page is blank now, no image. Not sure what i did wrong.
http://jdstrongtower.woctestsite.com
Dessalyn Murray says
Please disregard. I got the fix to work.
Brad Dalton says
Don’t forget to swap out the links in the jQuery to your images hosted on your server as the demo image links in the jQuery are hosted on a local installation of WordPress.