Nivo Sliderイベントトリガー（JQueryで）

Question

ここで問題の答えが何度か見つかったので、本当に素晴らしいコミュニティのようです。私は現在、クライアントのプロジェクトのためにNivoスライダーを使用しています：

http://nivo.dev7studios.com/support/jquery-plugin-usage/

私もjQueryのを使用してホバーでアニメーションを持っているページの3の画像ボタンを持っています。ホバリングするとボタンが背景画像に変わり、わずかにアニメーション化されます。

私のクライアントは、このアニメーションをNivoスライダの最後のスライドと同期させることを望んでいます。つまり、最後のスライドがフェードインしたときにアニメーションが発生し、スライダが始まったときにアニメーションが非アクティブになります。

私はアニメーションを使用していますが、問題は、Nivoオプションでは特定のスライドでイベントをトリガすることができないか、少なくとも私が把握できないことです。

NivoオプションbeforeChangeを使用してイベントを開始し、slideshowEndを使用してイベントを非アクティブ化します。問題は、beforeChangeは、最初のスライドの後にアニメーションをアクティブにし、最後のスライドの前にトリガーする方法を理解できないことです。

この

は、私が使用していますコードです：

beforeChange: function(){ 
      $('a.shop').animate({"margin-top": "-15px"}, "400"); 
      $('a.shop').css("background", "url(images/shop_button_hov.png) top center no-repeat"); 
     }, 
     slideshowEnd: function(){ 
      $('a.shop').animate({"margin-top": "0px"}, "400"); 
      $('a.shop').css("background", "url(images/shop_button.png) top center no-repeat"); 
     } 

私は本当にjQueryの専門家が、私はそれを使用すると、わずかな編集を行うことができないのですが、私は遠くから自分の関数を作ることができますよ。

ご協力いただければ幸いです！

Answer 1

あなたはここに現在のスライド

$('#slider').data('nivo:vars').currentSlide; 

を取得するには、次のコードを使用することができるソリューションです - それが動作するはずです。私はそれをテストしていない。

beforeChange: function(){ 
    var totalSlides = $('#slider img').length; 
    var currentSlide = $('#slider').data('nivo:vars').currentSlide; 

    /* check if the slide to come is the last slide */ 
    if(currentSlide == (totalSlides - 2)) 
    { 
     $('a.shop').animate({"margin-top": "-15px"}, "400"); 
     $('a.shop').css("background", "url(images/shop_button_hov.png) top center no- repeat"); 
    } 

}, 
slideshowEnd: function(){ 
    $('a.shop').animate({"margin-top": "0px"}, "400"); 
    $('a.shop').css("background", "url(images/shop_button.png) top center no-repeat"); 
} 

も、このSO質問 Showing Slide Count with Nivo Slider

をチェック