javascript - 单击flexslider中的图像时如何显示下一张幻灯片

Question

我正在使用flexslider插件，我想知道是否有一种简单的方法（除了更改插件的核心，如果我找不到简单的答案，我会这样做）来显示下一张幻灯片当您单击当前幻灯片时。我像这样设置了flexslider

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
        animation: "slide",
        controlsContainer: ".flex-container"
    });

我禁用了 Prev/Next 命令，因为我不喜欢它们。我该怎么办？

Answer 1

也许有点太晚了，但这是 Flexslider 2 的解决方案：

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container",
    start: function(slider) {
    $('.slides li img').click(function(event){
        event.preventDefault();
        slider.flexAnimate(slider.getTarget("next"));
    });
}
});

Answer 2

我在上面的代码中遇到了 Safari 问题。这是我的简单解决方案。

jQuery( document ).ready( function( $ ) {
    $('.flexslider').on('click', function(){
        $(this).find('.flex-next').click();
    });  
}


$(window).load(function() { 
    // Slider
    $('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container"    
    });
});

Answer 3

这是上面接受的答案的一个小更新，它针对单击的特定滑块，而不是页面上的所有滑块：

$('.flexslider').flexslider({ 
    start: function(slider) {
        $('.slides li img', slider).click(function(event){
            event.preventDefault();
            slider.flexAnimate(slider.getTarget("next"));
        });
    }
});

Answer 4

每个滑块动画完成后，找到活动幻灯片并更改图像 src

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    slideshow: false,
    touch: true,
    itemWidth: 235,
    itemMargin: 10,
    after: function (slider) {
      $(slider).find('.flex-active-slide').find("img").each(function () {
      var src = $(this).attr("data-src");
      $(this).attr("src", src).removeAttr("data-src");
   });
});