Предотвращение пропуски элемента в 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 -callback из 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'); 
    } 
}); 

Надеется, что это помогает кто-нибудь!