Flexslider is functioning well on my website. However, I wanted it to slide under a navigation bar so I adjusted its margin-top to -75px and its div.flexslider z-index to -2. The result looks great, but now the next/prev arrows don't animate in and the click navigation doesn't respond. Currently, it's just displaying an automatic slideshow. If I remove the z-index setting, everything works fine but the slider shows over the top of the nav bar.
The site is built 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>
No errors are displayed in Chrome's dev tools. In Firefox, the slider disappears completely unless the browser window is resized.
What other adjustments do I need to make to enable the prev/next and slide navigation to function properly with the z-index set as it is, or is there an alternative solution?