How to set starting slide for Foundation Orbit slider

Question

I'm using Foundation's Orbit slider to show levels of a house, the first slide is always the basement but this is not the slide that we would like to start with. We would like the page to first show the first floor, which is the second slide. We are using Foundation 4.

There is nothing in the documentation about setting a starting slide and adding the active class on the second slide in the HTML doesn't solve it either.

Check out my JSBin example: http://jsbin.com/IVisAWA/2/edit. Here the starting slide is '0' but I would like it to be '1'.

Answer 1

I can't find any built in option, you can use the orbit:ready event callback and force a click to the next element.

Code:

$("ul").on("orbit:ready", function(event) {
   $(".orbit-next").click();
});

Demo: http://jsbin.com/ekarucuc/1/edit

Answer 2

You can include two lines of code to the foundation.orbit.js to use and customize it your way:

1. Add this line self._goto(settings.start_slide, true); at the end of the "self.init" function.
2. In the Foundation.libs.orbit inside the "settings" list, add this new setting start_slide: 0 to start always on the first slide by default.
3. Now, reset the parameter of the starting slide you want to: <ul data-orbit data-options="start_slide:1;">.

knowing that your list starts at 0, the second item should be 1: data-options="start_slide:1;" in your HTML slide list.

Now you can use even two or more slides in the same page, one starting in the first slide, and the other starting where you want.

Answer 3

You can do this after you initialize your orbit slider.

$('#orbit-slide').data('orbit-instance')._goto(indexSlide, true);

Answer 4

I was looking for something similar, but couldn't use Fabricio's solution as I didn't have scope to change the Foundation.orbit.js file.

I ended up enabling the bullet point nav items when initialising Orbit, then just triggering a 'click' on the appropriate bullet point. But I didn't actually want to display the bullet points, so I hid them with some CSS.

Something like:

var button = $('div.orbit-container').find('li[data-orbit-slide="1"]');
button.trigger('click');

And:

div.orbit-bullets-container {
    display: none;
}