[box type=”alert”]Oct 2013 Update: WOO Ninjas add full-width slider option to Canvas’s own slider![/box]

There’s been some chatter over in the WOO Themes forums about a full-width slider in Canvas. I personally love the full-width slider in Scrollider, but I wanted something like it in Canvas. I’m sure the WOO Ninjas will bring it into Canvas at some point, but until then, here’s how to get a full-width slider into Canvas. The screencast walks you through how to set it up.

SliderPro

I chose Slider Pro because I owned it and it’s powerful and it gets good performance review over at Chris Lema’s awesome slider review. Remember that because I’m adding a bit code into the functions file, I need to chose the checkbox to use the slider’s skin. If you don’t do that, it doesn’t work quite right. I added the slider code into the functions file, I made a few tiny CSS adjustments, then it’s just up to you to create a beautiful slider. Have at it! If you do and you like the results, post them in the comments. If you do it and hate it … uh, try again and then post in the comments. :-)

functions.php

<?php 
add_action( 'woo_header_after', 'woo_custom_post_header_image', 30 );
function woo_custom_post_header_image() {
 if ( is_front_page() ) { ?>
<?php echo slider_pro(1, array("width"=>"100%", "height"=>300)); ?>
<?php
}}
?>

style.css

.home #nav-container {
margin-bottom: 0px !important;
}

Here’s a screenshot of the page with the slider at the top of the content, below the navigation.

The WOO Ninjas will come up with it at some point, but until then, here's a slider that goes full-width and is responsive.

The WOO Ninjas will come up with it at some point, but until then, here’s a slider that goes full-width and is responsive.

Revolution Slider

Thanks to Tom Glen at Bay Staging who got the Revolution Slider working with Canvas using this code:

add_action( 'woo_header_after', 'woo_custom_post_header_image', 30 );
function woo_custom_post_header_image() {
if ( is_front_page() ) { ?>

<?php
}}