Zurb Orbit custom navigation styles - My solution in F5 was to create new completely separate buttons (".next-slide" and ".prev-slide"), and then trigger the existing functionality with some JS overrides.

orbit-custom-nav.css

/* hide the built in controls */
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}

orbit-custom-nav.html

<span class="prev-slide">
	<img src="images/slider-nav-left.png">
</span>
<span class="next-slide">
	<img src="images/slider-nav-right.png">
</span>

orbit-custom-nav.js

//  Custom Slider button controls
$(".next-slide").click(function() {
    $(".slideshow-wrapper .orbit-next").click();
    $(".slideshow-wrapper .orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
    console.log("next button");
});

$(".prev-slide").click(function() {
    $(".slideshow-wrapper .orbit-prev").click();
    $(".slideshow-wrapper .orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});