Rotate through slides once, stop on last slide

[jeanadev]

I'm wanting to rotate through the slide deck just once and stop on the last slide. @lcorso37 on twitter suggested I post here. :) Hopefully this is the right place.

[mkelly12]

I just pushed a commit to our refactor branch that makes this possible in two different ways: a398d59d26d8de9ced9616f4c149dda41f126aed

When the slide changes orbit fires a orbit.next event. You can bind to this event, and use jQuery to see if your last slide is visible. If it is then trigger the orbit.stop event and the slider will stop rotating until you trigger orbit.start or click the start button. Note that these events are all triggered from the original element that you called the Orbit plugin on.

The other option is to just advance the slides without your own code, so you can set whatever interval you want, and take an action when you reach the last slide. You can advance the slide from your code by triggering the orbit.next event.

In either case you are going to want to use the latest version of our code in the refactor branch here: https://github.com/zurb/orbit/tree/refactor

[Peterqlam]

Figured it out, however this only works if you have the Orbit slider set to pause on mouse over.

Solution: If you have set the orbit slider to pause on mouse over you can trigger the mouseover event on a specific slide using jquery. I basically used a counter and the afterslidechange function to put this all together. Below is the code, just copy and paste it into your html file or where ever your Orbit slider exist.

NOTE: Code below is setup to for four slides. It stops on the first slide after one loop. If you want to change the slide number, just change the count value in the if condition. Also

<div id="featured"> 
 <a href="#" id="link"><img src="images/hero1.jpg" /></a>
 <a href="#" id="link"><img src="images/hero2.jpg"  /></a>
 <a href="#" id="link"><img src="images/hero3.jpg" /></a>
 <a href="#" id="link"><img src="images/hero4.jpg" /></a>
</div>

<script type="text/javascript">
var count = 1;
$(window).load(function() 
{
  $('#featured').orbit(
      {
        afterSlideChange: function()
   {
      count++;
      if(count == 5)
           {
              $("#link").trigger("mouseover");
           }

    }               
    });
});

</script>