I have Flexslider working nicely. However, I needed it to slide under a navigation bar so set it's margin-top to -75px and it's div.flexslider z-index to -2. Looks great but now the next/prev arrows don't fly in and the click navigation doesn't work. It's just an automatic slide show right now. If I remove the z-index setting, it works but shows over the top of the nav bar.
It's sitting in a site using bootstrap 3 :-
<div class="row">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/garden.jpg" />
</li>
<li>
<img src="images/house.jpg" />
</li>
</ul>
</div>
</div>
In Chrome there are no errors thrown in the dev tools. In Firefox, the slider disappears altogether unless the browser window is reduced in size.
What else do I need to adjust to allow the prev/next and slide navigation to work with the z-index set or is there another way?
The answer turned out to be removing the z-index:-2 on the flexslider. Then to push the nav over the top of it, had to add position:relative AND z-index:10. So the position:relative was the key to the solution.
Hope this helps someone else.
Craig