This solution replaces the background image which that displays behind the site header and home featured widget area with a slider.
The code in this tutorial produces a similar result to this tutorial, however it uses a slider plugin rather than jQuery added to your theme files.
In this case, we only replace the image with the slider between specific screen widths which are are 1023px and 1600px.
When the screen width is greater than 1600px, the default background image is displayed.
Demo Video #
Shows the slider images displaying in replace of the background image behind the home featured widget area in the AgentPress Pro child theme by StudioPress.
Installation – Support Included #
There’s 3 steps :
Step 1 – Install the Responsive WordPress Slider – Soliloquy Lite and create a new slider named Slider using the following configuration settings. The slider slug, needs to be named slider as it matches the slug in the PHP code added in step 2.
Step 2 – Upload the front-page.php file replacing the default front page template in the AgentPress Pro themes root directory.
The modified front-page.php file contains the following code already added to the file between lines 28 – 38 :
5 replies on “Slider Behind Site Header & Home Featured Widget In AgentPress Pro”
That’s what I thought but when I change to 1920px it’s removing the image and slider on anything over 1600px
Tested and works.
@media screen and (max-width: 1023px), (min-width: 1920px)
@media screen and (min-width: 1023px) and (max-width: 1920px)
Also set the slider settings to 1920px width
Did you clear caching?
Please send login details to brad@wpsites.net or Facebook messaging http://m.me/wpsites.net
Is there a way to make the slider work with a larger screen size, 1920px?
Change the width in the following lines of CSS from 1600px to 1920px
@media screen and (max-width: 1023px), (min-width: 1600px)
@media screen and (min-width: 1023px) and (max-width: 1600px)