防止在Flexslider

Question

我正在使用滑块，我不希望用户能够在我的滑块中跳过图像。所以我希望他们只能使用子弹导航点击1向前或1向后。

这是我到目前为止所尝试的，但没有成功：

1. 用于获取子弹的JavaScript：

// an outside javascript function
var preventBulletSkipping: function() {
    $(".flex-control-paging").each(function(i, sliderPaging) {
        $("li", sliderPaging).on("mousedown", function(e) {
            var $li = $(this);
            var $bullets = $li.siblings().andSelf();
            var bulletIndex = $bullets.index($li);
            var $next = $("a.flex-active", (($bullets.length-1) == bulletIndex ? $bullets.first() : $li.next()));
            var $prev = $("a.flex-active", (0 == bulletIndex ? $bullets.last() : $li.prev()));

            if (!$next.length && !$prev.length) {
                // I get here when I expect to, but I can't prevent the click from happening
                e.preventDefault();
                e.stopPropagation();
            }
        });
    });
}

这让我到达了我想去的地方，但是我无法阻止点击和幻灯片的更改。

我的下一步方法是使用before - Flexslider的回调，如下所示：

$('.bulletgallery .flexslider').flexslider({
    animation: "slide",
    before: function(slider) {
        var currentSlide = slider.currentSlide;
        var nextSlide = slider.getTarget("next");
        var prevSlide = slider.getTarget("prev");

        // dead end, as currentSlide already points to the bullet clicked
    }
});

但那不起作用，因为在该回调中，currentSlide已经指向我点击的子弹。

那么，这里有什么想法吗？

Answer 1

好的，经过很长一段时间后，我找到了一个解决方案，我很高兴。为了便于阅读，我提出了很多变数。 ： - ）

$(".bulletgallery .flex-control-paging li a").on("click", function(e) {
    e.stopPropagation();

    var $bullets = $(this).parent().siblings().andSelf();
    var $me = $(this).parent();
    var $active = $(".flex-active", $bullets).parent();
    var meIndex = $bullets.index($me);
    var activeIndex = $bullets.index($active);

    if (meIndex == activeIndex) {
        return;
    }

    var $slider = $(this).parents('.flexslider');

    // if clicked on an item beyond or past the currently active slide, only move one
    if (meIndex > activeIndex) {
        $slider.flexslider('next');
    } else {
        $slider.flexslider('prev');
    }
});

希望这对任何人都有帮助！