Do something on last slide with Cycle2 and multiple sliders

Question

I have a bunch of sliders with their own next/prev controls. What I would like when you reach the last slide of any of the sliders is for it to do something, which in this example is show an alert.

<div class="project">

  <div class="slider">

   image

   image

   image

  </div><!-- slider -->

  <div class="controls">

   <span class="prev">Prev</span>

   <span class="next">Next</span>

  </div><!-- controls -->

</div><!-- project -->

Repeat above code x 5

and in my .js file:

$('.slider').each(function() {
    var p = this.parentNode;
    $(this).cycle({
        fx: 'fade',
        speed: 'slow',
        timeout: 0,
        next: $('span.next', p),
        prev: $('span.prev', p),
        nowrap: 1,
        end: function() {
            alert('The slideshow has ended.');
        }
    });
});

Does that make sense and can anyone help. Thanks in advance

BTW: I'm using Cycle2 by malsup www.malsup.com/jquery/cycle2

Answer 1

I should of properly read the documentation - I've been mixing jCycle and Cycle2 API together.

$('.slider').on('cycle-finished', function(event, opts) {
   alert('The slideshow has ended.');
});

and the final code for the slider:

$('.slider').each(function() {
var p = this.parentNode;
$(this).cycle({
    fx: 'fade',
    speed: 'slow',
    timeout: 0,
    next: $('span.next', p),
    prev: $('span.prev', p),
    nowrap: 1,
});
});