Question

我一直在使用Flexslider并且喜欢它，但我有一个我想要实现的自定义功能，我有点卡住了。

在每张幻灯片中，我有一些带有2个按钮的文本，基本上是真或假。单击其中一个按钮后，根据用户是否选择了正确的答案进行动画处理。不管他们选择什么，经过几秒钟的短暂延迟后，我希望幻灯片能够动画到下一张幻灯片。

我的flexslider调用如下所示：

$(window).load(function () {
$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    slideshow: false,
    controlNav: false,
    touch: true,
    smoothHeight: true
});
});

我设法创建了一些javascript，以便在点击按钮时移动到第二张幻灯片：

$('.true-or-false .btn').click(function () {
$('.slider').flexslider(0);
});

但是为每一个按钮做这个都是一件痛苦的事情，我试图找到一个'下一个'功能但却无法正常工作。除此之外，我尝试添加.delay(2000)，但这似乎与上述代码不相符。

我认为flexslider中的幻灯片有延迟功能，我只需要找到一种方法，使用自定义按钮移动到下一张幻灯片。任何人都可以对此有所了解吗？

感谢您花时间阅读本文！ STE

*编辑*

由于某种原因，当我第一次尝试下面的代码时，它无法正常工作，但现在添加“下一步”会使幻灯片在点击按钮时动画显示下一个 - 现在我只需要延迟！

$('.true-or-false .btn').click(function () {
$('.slider').flexslider('next');
});

Answer 1

看起来我已经设法让这个工作，并认为在这里发布我的解决方案可能是有用的，因为任何人都应该寻求与Flexslider实现类似的功能。以下是我提出的建议：

$('.true-or-false .btn').click(function () {
setTimeout(
    function()
    {
        $('.flexslider').flexslider('next')
    }
    , 2000);
});

当点击Flexslider中的（自定义）按钮时，将会移动到下一张幻灯片，但不会在延迟之前，当您可以指定时。

快速说明一下。我想要实现这种效果的原因是因为当你点击一个按钮（无论是真还是假）时，会发生一个动画，告诉用户在转到下一个问题之前他们是否正确。

希望这有助于其他人：）

Flexslider：在自定义按钮单击时移动到下一张幻灯片（有延迟）

1 个答案: