防止跳过 Flexslider 中的元素

Question

我正在处理一个滑块，我不希望用户能够跳过我的滑块中的图像。所以我希望他们只能使用项目符号导航单击 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();
            }
        });
    });
}

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

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

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

希望对大家有帮助！

防止跳过 Flexslider 中的元素

Prevent skipping of an element in Flexslider

javascript

jquery

flexslider