orbit jquery slider pause on last slide

Question

I'm using the Zurb Orbit Slider: http://www.zurb.com/playground/jquery_image_slider_plugin

I have a slideshow using the following settings:

$(window).load(function() {
$('#featured').orbit({
    animation: 'fade',               
    animationSpeed: 100,                // how fast animtions are
    timer: true,                        // true or false to have the timer
    advanceSpeed: 250,                  // time between transitions 
    directionalNav: false,              // manual advancing directional navs
    afterSlideChange: function(){}      // empty function               
    });
});

then i'm hiding the timer using CSS (cause if i turn the timer off then the frames don't advance and i've hidden the directional navs so...):

div.timer {display: none;}

anyhow, everything so far is working perfectly for me. what i can figure out how to do is get the slide show to stop rotating through the slides, i.e. to stop on the last slide / not loop back to the first.

i suspect the answer has something to do with the ability to add a function in after a slide change:

afterSlideChange: function(){}

but, alas, this JS is beyond me.

in case you're curious: it's for a little experiment where i'm using a jquery slider to create a sort of a stop-motion animation, a technique i've been wondering about for a while. it's working great but the forever looping really screws things up. :)

thanks so much for your time and for sharing your expertise!

Jon

Answer 1

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. You'll also need to add links to each image in the slider and assign id's to each link. This is needed to call the on mouseover event.

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

Answer 2

I found this when searching myself: https://github.com/zurb/orbit/issues/49