如何在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中單擊圖像時顯示下一張幻燈片

回答

相關問題