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

Question

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

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

我禁用了上一页/下一页命令，因为我不喜欢它们。我该怎么办？

- Nicola Peluchetti

---

有那么多的插件可用，你很难找到有人能回答这个问题。 - Diodeus - James MacFarlane

这非常具体。任何半靠谱的插件都会有自己的支持论坛 - 你是否尝试过到他们的网站上查看是否有支持论坛？如果有，很可能已经在那里问过了。 - ClarkeyBoy

@ClarkeyBoy，有一个支持论坛，我在那里问过了，最终我将修改核心。 - Nicola Peluchetti

那可能是你最好的选择。我猜controlsContainer包含下一个/上一个按钮 - 鉴于此，你应该只需要搜索它，找到绑定单击事件到按钮的位置，删除上一个按钮并将下一个按钮的选择器更改为所有幻灯片共有的类。这就是我能帮助的全部了，除非我自己使用插件（或者如果你可以设置JSFiddle，那么我可能能够帮助..？）。 - ClarkeyBoy

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

- Sergey

---

这个代码可以工作，但会让页面上所有的 Flexslider 实例都向后翻页。您知道如何只让被点击的那一个进行翻页吗？ - Simon27

像@Simon27一样，我想针对特定的滑块进行操作，而不是页面上的所有滑块。我该怎么做？你能从事件中访问滑块吗？ - Daniel

@Daniel，最终我成功使用这个代码片段使它工作了。这个代码片段通过查找下一个控件并仅为正确的滑块触发单击来实现操作。 - Simon27

将 $('.slides li img') 更改为更具体的幻灯片，以便针对特定的幻灯片展示进行目标定位。例如：$('#flexslider1 .slides li img')。 - Jake

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

- meck373

Answer 3

这是对上面被接受的答案的小更新，针对特定的滑块进行操作，而不是页面上的所有滑块：

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

- Joey Joe Joe Junior Shabadoo

Answer 4

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

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

- Sambhav

---

也许我漏掉了什么，但这将完全破坏实际滑块。我只想要切换到下一张幻灯片，而不是在那些幻灯片中的图像上玩魔方。更重要的是，幻灯片通常不仅仅是一张图片... 这绝对是最糟糕的想法。即使你想要用魔方来展示你的幻灯片，你也可以使用幻灯片的内容，而不是随机抓取图像来源... - Jake