Nivo Slider滑動解決方法（並非總是向一個方向滑動）

讓我以此爲前綴，說我在這裏多喜歡這個社區，它總是很棒的幫助瀏覽和作爲問題在這裏，非常感謝！Nivo Slider滑動解決方法（並非總是向一個方向滑動）

問題所在。所以我有一個客戶端想要一個幻燈片放映，如果按下右側導航箭頭，可以從右側→左側滑動圖像，如果按下左側箭頭則從左側→右側滑動圖像。

目前在nivo-slider（它是我唯一真正使用過的唯一一個）的配置文檔中，似乎除了總是向右滑動或總是向左滑動（slideInLeft，slideInRight）之外無法獲得任何東西。

是否有反正，例如，描述哪些被按下，並運行該動畫方法，而不是通常的？

在此先感謝， Aleski。

來源

2012-01-26 Aleski

我有同樣的問題。當prev/next鏈接改變時，我嘗試更改settings.effect，但這不起作用。 – melat0nin

你有沒有找到解決這個問題的方法？我試圖找出如何做到這一點以及 – Chris

爲「jquery.nivo.slider.js」評論前「//運行的影響」中的「自定義//轉移註釋和代碼後添加該所界定「數據轉換」屬性「。如果您點擊向左或向右箭頭或按鈕，此顯示會改變當前效果。對於這項工作，您必須在HTML中沒有「數據轉換」屬性和默認效果，因此您必須在「jquery.nivo.slider.js」中的「默認設置」註釋下定義imageis，因爲首選「數據轉換」屬性。我編碼它知道我的項目。

 if(nudge === 'prev'){ 
      currentEffect = 'slideInLeft'; 
     } 
     else if (nudge === 'next'){ 
      currentEffect = 'slideInRight'; 
     } 
     else if (nudge === 'control'){ 
      currentEffect = 'fade'; /*test*/ 
     }

來源

2013-02-21 10:19:55

我只是不明白在答案中的任何東西，除了將代碼添加到nivo js文件。我應該將哪種效果設置爲默認值？ –

默認效果對於此代碼並不重要，我可以根據需要將默認效果更改爲另一種效果。沒有這個代碼，你對箭頭和控件只有相同的「默認」效果。 =>右邊的這段代碼使用「slideInLeft」;左箭頭「slideInRight」和導航按鈕上使用「淡入淡出」效果。 –

我只注意到了這個問題 - 我回答Chris's similar question這個解決方案應該有希望爲你工作，以及：

每nivo slider documentation您可以通過添加自定義數據更改爲每張幻燈片的效果屬性到任何或全部的圖像和它將覆蓋NIVO的默認過渡：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

您可以通過在文檔上設定的事件處理程序，以尋找一個按鍵動態地改變這個自定義數據，然後使用該代碼段更改所有圖像的ATTR如下：

var $body = $("body"); 
var $images = $("img"); 

$body.on('keydown', function(e) { 
    if(e.keyCode == 37) { // left 
    $images.attr("data-transition","slideInLeft"); 
    } 
    else if(e.keyCode == 39) { // right 
    $images.attr("data-transition","slideInRight"); 
      } 
    });

一個工作小提琴是在這裏：http://jsfiddle.net/gregjuva/YJaVS/

來源

2012-04-27 18:11:26

+1的答案和小提琴 –

我解決這個問題通過把下面的代碼jQuery.nivo.slider.js文件的nivoRun功能（只是currentEffect變量之後被初始化）：

if(settings.effect === 'slideInLeftRight') 
{ 
    if(nudge === 'prev') 
    { 
     currentEffect = 'slideInRight'; 
    } 
    else 
    { 
     currentEffect = 'slideInLeft'; 
    } 
};

此代碼創建名爲你自己slideInLeftRight效果。

的slideInLeftRight效果將使用slideInRight效果按下prev按鈕時並且當按下next按鈕時將使用slideInLeft效果。

使用slideInLeftRight效果是這樣的：

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     effect: 'slideInLeftRight', 
     ... 
    }); 
}); 
</script>

來源

2013-04-11 21:19:27

Nivo Slider滑動解決方法（並非總是向一個方向滑動）

回答

相關問題