Use divs instead of bullets for Orbit

Question

Orbit comes built in with a bullet nav system. Instead of using those bullets to navigate between slides, I'd like to use items in a nav menu on my page to do the same thing. Is there an elegant way of basically substituting a series of divs for the bullets so that when I click on one of my divs it will cause Orbit to scroll to the appropriate slide? Would it be wiser just to create my own content slider? Thanks in advance for any advice you might have.

Answer 1

I was looking for a way to do this also - it seems like this should probably be built in down the track for greater flexibility.

I had a quick look and tweaked this solution https://github.com/zurb/foundation/issues/118/ using orbit 1.4.0.

You use whatever structure you like for the nav:

<div id="custom-orbit-nav">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

Then bind the navigation divs with jquery, and use the orbit functions to change slide index, here's my initialization code:

$("#featured").orbit();
$("#custom-orbit-nav div").click(function() {
    var myIndex = $(this).index();
    $(this).addClass("active");
    $("#featured").trigger("orbit.stop").trigger("orbit.goto", [myIndex]);
    return false;
});