Styling navigation controls

[jonmunson]

Styling the default controls is not as straightforward as it could be. It would be good if there were some options in the JS setup to have custom icons/images.

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 as follows:

//  Custom Slider button controls
$(".next-slide").click(function() {
    $(".slideshow-wrapper .orbit-next").click();
    $(".slideshow-wrapper .orbit-timer").click();
});

$(".prev-slide").click(function() {
    $(".slideshow-wrapper .orbit-prev").click();
    $(".slideshow-wrapper .orbit-timer").click();
});

Then use some CSS to hide the built in controls:

.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}