Full width Slider in Parallax Pro

In this beginner level article I show how a full width Genesis Responsive Slider can be set up below the header in homepage of Parallax Pro on the lines of my tutorial for Minimum Pro.

full-width-slider-parallax-pro

Step 1

Register a widget area for the Home Slider by adding the following in functions.php:

1 2 3 4 5
genesis_register_sidebar( array(
'id' => 'home-slider',
'name' => __( 'Home Slider', 'parallax' ),
'description' => __( 'This is the home slider widget area.', 'parallax' ),
) );
view raw functions.php hosted with ❤ by GitHub

Step 2

Let’s display this Home Slider widget area above Home Section 1.

Edit front-page.php.

Change

1
if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {
view raw gistfile1.php hosted with ❤ by GitHub

to

1
if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {
view raw gistfile2.php hosted with ❤ by GitHub

and add

1 2 3 4
genesis_widget_area( 'home-slider', array(
'before' => '<div class="home-slider widget-area">',
'after' => '</div>',
) );
view raw gistfile4.php hosted with ❤ by GitHub

immediately before

1 2 3 4
genesis_widget_area( 'home-section-1', array(
'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
view raw gistfile3.php hosted with ❤ by GitHub

Step 3

Install and activate Genesis Responsive Slider.

Below are the settings used in my test site for this tutorial:

genesis-responsive-slider-parallax-pro

Go to Appearance > Widgets and drag Genesis – Responsive Slider widget into the Home Slider widget area.

Screen Shot 2014-03-17 at 11.49.13 AM

Step 4

Add the following in style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
/* Full width Slider
------------------------------------------ */
 
.home-slider #genesis-responsive-slider {
border: none;
padding: 0;
}
 
.home-slider .slide-excerpt-border p {
margin-bottom: 0;
}
 
.home-slider .flex-control-nav li a,
.home-slider .flex-direction-nav li a {
border-bottom: none;
}
 
.home-slider .flex-direction-nav li .prev {
left: 0;
}
 
.home-slider .flex-direction-nav li .next {
right: 0;
}
 
.home-slider .flexslider .slides img {
width: 100%;
}
 
.home-slider .flexslider {
max-width: 100%;
}
 
 
@media only screen and (max-width: 768px) {
 
.home-slider .slide-excerpt {
width: 100%;
}
 
}
 
@media only screen and (max-width: 568px) {
 
.home-slider .slide-excerpt {
display: none;
}
 
.home-slider .flex-direction-nav {
display: none;
}
 
}
view raw style.css hosted with ❤ by GitHub

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 396 other subscribers

Donate

Found this article helpful?

Comments

  1. K Askins says

    this is very helpful and a great start for me! i tried to use the same instructions for magazine pro. so that i could add a slider the same way but its showing up in the home page content area instead of at the top like this example. any tips?
    thanks again!

  2. Mark Purvis says

    Hi Sridhar,
    Thank you for posting so many helpful tips about customizing Genesis. I have tried to use this tutorial, actually starting with the Minimum-Pro theme, to add a Royal Slider to both the Minimum and Parallax themes with success only with the Genesis Responsive Slider.
    Is there something I’m missing in order to use this technique to add other sliders? My typical use is Royal Slider and Layer Slider plugins. The Royal Slider doesn’t stay within the container created by the widget area, but flows horizontally down the page.
    I’m using a sandbox site, but could send you a url in private email if that helps.
    Thanks again for all your time and hard work.
    Warmest regards,
    Mark

  3. André says

    Hi, this is great! However, I am struggling to change the look of the excerpt. I’d like to amend it to something in between the excerpt from Outpost Pro (the transparent box) and Executive Pro (the left block). Whenever I am changing the CSS the CSS from the plugin is used rather than the custom CSS. I cannot remove the border and add other CSS values. It looks like html > body .slide-excerpt-border from the plugin CSS overrides all. Is there anything I need to change in addition? Many thanks!

    Cheers
    André

  4. David says

    I have added a Soliloquy slider using this method.

    My question is, how to make that slider section, also parallax?
    It just scrolls through like the mobile version.

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>