Nivoスライダの回避策（常に一方向に滑っているとは限りません）

Question

このプレフィックスには、ここでstackoverflowでこのコミュニティをどのくらい愛しているか、そして常にブラウジングや質問に役立つので、ありがとうございます。

問題です。 私は、右のナビゲーション矢印が押された場合には右→左へ、右の矢印が押された場合には左→右へのスライドが可能なクライアントを持っています。

現在、nivo-slider（私が実際に使用している唯一のもの）の設定ドキュメントでは、常に右にスライドするか、常に左にスライドするか（slideInLeft、slideInRight）のいずれかを離れているようです。

とにかく、押されたものを描いて、通常のアニメーション方法ではなくそのアニメーション方法を実行していますか？

ありがとうございました。 Aleski。

Answer 1

コメントの前に「jquery.nivo.slider.js」「//実行効果」に//カスタム移行」にコメントやコードの後に​​これを追加することによって定義されています"data-transition"属性を使用します。左または右の矢印またはボタンをクリックすると、このショーは現在の効果を変更します。この作業では、 "data-transition"属性がなく、デフォルトの効果を持たないHTMLでimage_isが必要です。 "data-transition"属性が好きなので、コメント "//デフォルト設定"の下で "jquery.nivo.slider.js"で定義する必要があります。私はそれが私のプロジェクトのために知っているコードです。

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

Answer 2

私はこの質問に気づいた - 私はChris's similar questionに答えて、このソリューションは、うまくいけば、同様にあなたのために働く必要があります：nivo slider documentationあなたがのいずれかまたは全ての上にカスタムデータ属性を追加することによって、各スライドの効果を変更することができパー

をあなたがキーの押下を探すために、文書本体にイベントハンドラを設定することにより、動的にこのカスタムデータを変更して、スニペットを使用しているすべての画像のATTRを変更することができます

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

：イメージとそれがnivoのデフォルト遷移を上書きします以下：

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/

Answer 3

私はjQuery.nivo.slider.jsファイル（currentEffect変数が初期化された直後）のnivoRun機能に次のコードを置くことによってこの問題を解決：このコードはslideInLeftRightと呼ばれる独自の効果を作成します

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

。

prevボタンが押されたときにslideInLeftRight効果がslideInRight効果を使用し、nextボタンが押されたときには、slideInLeft効果を使用します。私は同じ問題を抱えている

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