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:
Hello!
This worked perfect. How do I add text and linking to each slide?
Thanks, Mark
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.
Okay that’s what I thought, just checking.
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!
Try loop:true
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?
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.
We are loading the jQuery in the backstretch-set.js file of the Agency Pro themes js folder.
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 :
My page is blank now, no image. Not sure what i did wrong.
http://jdstrongtower.woctestsite.com
Please disregard. I got the fix to work.
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.