CODEWITHSUNDEEP
javascriptjqueryorbit
Ninjanoel
Ninjanoel

Reputation: 2914

Manually Advancing Orbit Slider

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?

Upvotes: 1

Views: 3226

Answers (4)

Seth Brasile
Seth Brasile

Reputation: 79

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();
});

Upvotes: 0

Steve
Steve

Reputation: 14922

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.

Upvotes: 0

SimonHL
SimonHL

Reputation: 175

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');

Upvotes: 5

jfmatt
jfmatt

Reputation: 926

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.

Upvotes: 4

Related Questions