Navigation controls outside the carousel - Zurb Foundation Orbit

Question

I am trying to have the Navigation controls just outside the carousel instead of default inside.

There's no data-option available for this. So I tried hacking the CSS for the nav arrows to give it negative absolute positioning.

However, the parent container is set to overflow: hidden and hides the arrows. Is this possible by default?

Answer 1

Loooking at your example I was able to apply the following CSS to the ul with the id of #featured1:

#featured1 {
    width: 90%;
    overflow: hidden;
    padding-left: 10%;
}

Doing so you will need to move the timer in the upper right over a bit and also throw off the caption width. That is easily done with this css:

.orbit-container .orbit-timer {
    right:70px;
}

.orbit-container .orbit-slides-container > * .orbit-caption {
     width:90%;
}

This solution will make your slider images smaller so you may want to increase the width of .large-10 for this case.