jquery - 使用 Cycle2 和多个滑块在最后一张幻灯片上做一些事情

Question

我有一堆带有自己的下一个/上一个控件的滑块。当您到达任何滑块的最后一张幻灯片时，我希望它做一些事情，在本例中是显示警报。

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

重复上述代码 x 5

在我的 .js 文件中：

$('.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.');
        }
    });
});

这是否有意义，任何人都可以提供帮助。提前致谢

顺便说一句：我正在使用 malsup www.malsup.com/jquery/cycle2 的 Cycle2

Answer 1

我应该正确阅读文档 - 我一直在将 jCycle 和 Cycle2 API 混合在一起。

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

以及滑块的最终代码：

$('.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,
});
});