CODEWITHSUNDEEP
zurb-foundationorbit
Godwin
Godwin

Reputation: 9907

How to set starting slide for Foundation Orbit slider

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'.

Upvotes: 1

Views: 1758

Answers (4)

Renner Poveda
Renner Poveda

Reputation: 1

You can do this after you initialize your orbit slider.

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

Upvotes: 0

duncan
duncan

Reputation: 31912

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

Upvotes: 0

Fabricio
Fabricio

Reputation: 1198

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.

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

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

Upvotes: 1

Related Questions