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

我正在使用flexslider插件，我想知道是否有简单的方法（除了更改插件的核心，这是我要去的如果我找不到一个简单的答案）显示下一张幻灯片，当你点击当前幻灯片。我设置了这样的柔性滑板如何在flexslider中单击图像时显示下一张幻灯片

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

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

来源

2012-03-05 Nicola Peluchetti

有这么多的插件，在那里，你”不太可能找人回答这个问题。 – 2012-03-05 16:57:00

这是非常具体的。任何一半体面的插件都会有它自己的支持论坛 - 你有没有试过他们的网站，看看他们是否有支持论坛？如果他们这样做，那么有机会在那里被问到。 – ClarkeyBoy 2012-03-05 17:01:16

@ClarkeyBoy有一个支持论坛，我也在那里问，我将最终修改核心 – 2012-03-05 17:07:06

也许有点为时已晚，但这里的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")); 
    }); 
} 
});

来源

2012-07-04 16:10:48 Sergey

我一直在寻找这个，谢谢！ – rkrdo 2012-08-01 22:24:05

这可以工作，但会使页面上Flexslider的所有实例进入下一张幻灯片。你知道如何让它只是点击进展的那个？ – Simon27 2013-05-03 11:25:21

感谢一位伙伴！ – Zohaib 2013-05-29 13:43:37

-1

后，发现活动幻灯片，改变图像的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"); 
    }); 
});

来源

2013-07-26 09:48:11 Sambhav

也许我错过了一些东西，但这会完全破坏实际的滑块。我只想到下一张幻灯片，但是这张图片会在这些幻灯片中与图像进行混合。更重要的是幻灯片往往不仅仅是一张图片......这是迄今为止最糟糕的想法。即使您想要将幻灯片的多维数据集进行rubbing，也可以使用幻灯片的内容来完成，而不是随机抓取图像源... – Jake 2014-06-30 04:42:51

我上面的代码的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"  
    }); 
});

来源

2015-01-24 14:48:46 meck373

这里有一个小更新接受的答案以上为目标的具体滑块点击，而不是网页上的所有滑块：

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

来源

2016-07-07 17:12:44

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

回答

相关问题