Manually Advancing Orbit Slider

Question

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.

Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.

So if I have a link named 'myLink', then something like this...

$('#myLink').click(function() {
   ... code to advance javascript slider...
   $('#content').orbit(?????);
});

Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?

Answer 1

The easiest way would be

$(".slider-nav .right").click();

to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.

I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.

Answer 2

Get a reference to the orbit object using "afterLoadComplete":

var myOrbit;

$(".orbitSlides").orbit({
        afterLoadComplete: function() {
            myOrbit = this;
        }
});

Then use the 'shift' function to change slides:

myOrbit.shift(1);

or

myOrbit.shift('prev');

or

myOrbit.shift('next');

Answer 3

I use this

$('#next').click(function(){
$('#rotator').trigger("orbit.next"); 
})
$('#prev').click(function(){
    $('#rotator').trigger("orbit.prev"); 
})

assuming the div #rotator is the orbit slider.

Answer 4

I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:

HTML:

<p id='back'>Back</p>
<p id='next'>Next</p>

CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)

.orbit-prev, .orbit-next {
    visibility: hidden;
}

jQuery:

$('#back').on('click', function() {
    $('.orbit-next').click();
});

$('#next').on('click', function() {
    $('.orbit-prev').click();
});