jQuery Cycle Plugin - 满足条件时跳到下一张幻灯片答案

【问题标题】：jQuery Cycle Plugin - Skip to next slide when a condition is metjQuery Cycle Plugin - 满足条件时跳到下一张幻灯片
【发布时间】：2013-04-07 22:40:42
【问题描述】：

我想知道在满足特定条件时如何跳到下一张幻灯片。

这是我的代码：

    $('#slider').cycle({
        fx: 'fade',
        speed:  200, 
        timeout: 3000,
        before: function() {
            if ($(this).attr('class') == 'empty-container') {
                $(this).cycle('next');
            }
        }
    });

滑块的 HTML 标记如下：

<div id="slider">
  <div class="container">......</div>
  <div class="empty-container"></div>
  <div class="container">......</div>
</div>

当遇到带有“空容器”类的 div 时，我想立即跳到下一张幻灯片。我知道实现这一点的最简单方法是使用slideExpr 选项，但由于同一幻灯片中有多个寻呼机标记，我无法使用slideExpr。

【问题讨论】：

为什么不在初始化循环之前移除空容器？还有multiple pager markups 是什么意思。如果删除不是一种选择，请提供标记
@charlietfl 这是由于寻呼机中的某些元素仍需要映射到空容器。所以空容器应该保留在那里，但我只需要想办法跳过它们。
@charlietfl "multiple pagers" 是幻灯片顶部和底部的导航按钮。
您需要检查下一张幻灯片，而不是 before 回调中的 this。使用循环文档中选项中显示的参数。寻呼机也可以在插件中动态生成，所以仍然不确定为什么不能删除空...让插件创建寻呼机并发出dissapears
@charlietfl 该插件只能在一侧创建寻呼机，但不能在幻灯片的两个不同侧创建自动幻灯片。我的标记是这样的：<div class="top-pager">...</div><div id="slider">...</div><div class="bottom-pager">...</div>。抱歉，我不太明白您所说的 check next slide 是什么意思。可以举个例子吗？

标签： jquery jquery-cycle

【解决方案1】：

我使用after: 而不是before: 选项，现在它似乎可以很好地解决我的特定问题。所以jquery现在是：

$('#slider').cycle({
        fx: 'fade',
        speed:  200, 
        timeout: 3000,
        after: function() {
            if ($(this).attr('class') == 'empty-container') {
                $(this).cycle('next');
            }
        }
    });

【讨论】：