Full Width Slider

Question

Has anybody been able to implement a full-width slider on Magento using the default theme? I've played with it and can't successfully get the slider to display outside of the main container which maxes out at 1200px wide.

Using the CSS code:

position:absolute;
left:0px;
width:100%;

Doesn't work since the left margin from the parent container still exists so it only flows off to the right. I've tried putting it in static blocks and calling the block but anytime I do that it shows up on every page. Any ideas of how I can pull the slider out from the container and make it full width?

I've also adjusted it using:

left:-300px

But this makes any text within the images/slides to not display in the center and doesn't respond very well as the window gets smaller. Any thoughts or ideas?

Thanks. Seems like it should be simple but I can't figure it out.

Answer 1

1. create a static block (CMS > Static Blocks) that contains your slider

2. Create a new widget instance (CMS > Widgets) and select your theme

3. Add Layout Update for page "Home Page" and reference "Page Header" (this is a container within the page header, below the main navigation)

4. Select static block from (1) in "Widget Options":

5. Save.

6. Clean cache.

Answer 2

You can do this by adding custom cms block (if you want to be able to manage content images and text through admin) between header and main-container. Edit 1-column.phtml (if it's you're default for homepage)