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");
   });
});

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

4 个答案: